私は大体<a href="http://codepen.io/ierik/pen/ZpaZKz" rel="nofollow">this CodePen</a>のように見えるページレイアウトをコーディングしようとしている列が

Question

財団フレックスグリッドを使用して、使用可能な高さを埋める作り、私は全体のブラウザ画面（100% height）を埋めるために必要mainコンテナ、および2つのつの子divの要素を持っています12列の

最初の列の高さは固定されており、コンテナ内の残りの垂直スペースを埋めるのに2番目の列が必要です。しかし、第2列のheightを100%に設定すると、コンテナの残りの高さを取る代わりに、親コンテナの高さは100%になり、親コンテナと同じ高さになります。 2番目の列を残っている残りの垂直スペースを単に埋める方法はありますか？

編集：最初の列の高さは実際には固定されていないため、変更されることがあります。

Answer 1

親コンテナがheight: 100%あり、そしてheight: 100pxを持つ子要素がある場合は...

あなたが他の子height: 100%を与えるときの兄弟が、すでに100pxにを消費しているので、それはコンテナをオーバーフローします。これに代えて

100% + 100px > 100% 

：

.box-two { 
    background: red; 
    height: 100%; 
} 

はこれを試してみてください。つまり

.box-two { 
    background: red; 
    height: calc(100% - 100px); 
}