フレックスコンテナ内で子を垂直に塗りつぶす問題

Question

私はその中にテーブルを持つ子divを持っています。私は、このdivを親コンテナ内に垂直に塗りつぶして欲しい。

私はさまざまな方法、位置、フレックス、マージンなどを試しましたが、親コンテナ内で垂直方向に伸びることはできません。

<div class="container"> 
    <div class="content"> 
     <div class="GridViewContainer wrapper"> 
     </div> 
    </div> 
</div> 

は私がここにデモを設定している

コンテンツの残りの部分を記入しGridViewContainerラッパーをしたい：

は基本的に私は次のことを持っています（デモ用にテーブルdivを400pxの固定高さに設定しました）

DEMO -https://jsfiddle.net/7ashn3b5/

Answer 1

あなたは親コンテナにdisplay:flexを逃しています。

フレックスコンテナを.contentにしていないため、flex-direction:columnは無視され、フレックスアイテムはフレックスプロパティを無視しています。

あなたは.contentにdisplay:flexを追加（およびheight:400pxを削除）したら、その親の完全な利用できる高さを伸ばすためにそれを伝えている、.GridViewContainer wrapperにflex:1を適用することができます。

Revised Fiddle