利用可能なスペースを埋めるためにフレックスボックスの列を取得する

Question

私は、フレックスボックスの列に項目を記入するためにcssフレックスボックスが正しく機能するように努力してきました。

基本的に、このコードでは、2つのフレックスピースがそれぞれ利用可能な高さの50％を占めるように均等に配置します。私が手動で高さを50％に設定した場合、それは機能しますが、それは不正な解決策のように思えます。

私はガイドをここで読んでいます：https://css-tricks.com/snippets/css/a-guide-to-flexbox/とそれを修正するかどうかを確認するために様々な整列自己、フレックス成長、整列内容を試しましたが、これまで私は運がなかった。私は何かシンプルなものが欠けていると確信していますが、私はそれを理解することができず、スタックのオーバーフローに関する他の質問を読むことは、私が間違ってやっていることを理解するのに役立たないようです。ここ

.flex { 
 
    display: flex; 
 
} 
 

 
.flex1 { 
 
    flex: 1; 
 
} 
 

 
.col-flex { 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>

全コード：https://codepen.io/anon/pen/EwbLMM

Answer 1

はあまりにコンテナフレキシボックスしてください。 display: flexcol-flexに追加 - デモ下記参照：

.flex{ 
 
    display:flex; 
 
} 
 

 
.flex1{ 
 
    flex:1; 
 
} 
 

 
.col-flex{ 
 
    display: flex; /* ADDED */ 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>