高さ：100％がflexbox内で動作しない

Question

青色のボックスは100％の高さにする必要があります。これは、ピクセルの高さをdiv.aに設定したときに機能しますが、残念ながらこれは実際の場合のオプションではありません。 http://codepen.io/anon/pen/jrVEpB

.a{ 
 
    background-color:red; 
 
    display:flex; 
 
} 
 
.b1{ 
 
    flex-grow:0; 
 
    background-color:green; 
 
} 
 
.b2{ 
 
    flex-grow:1; 
 
    background-color:yellow; 
 
    height:100%; 
 
} 
 

 
.c{ 
 
    height:100%; 
 
    background-color:blue; 
 
}

<div class="a"> 
 
    <div class="b1"> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    
 
    </div> 
 
    <div class="b2"> 
 
     <div class="c"> 
 
      miksi et ole full height saatana 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

あなたがこのレイアウトを達成するための割合の高さを必要としません：

これはおそらく、すべてを説明しています。それだけではFlexプロパティを使用して構築することができます。

• Working with the CSS height property and percentage values
• Chrome/Safari not filling 100% height of flex parent

：割合の高さを使用することが必須である場合

.a { 
 
    display: flex; 
 
    background-color: red; 
 
} 
 
.b1 { 
 
    background-color: green; 
 
} 
 
.b2 { 
 
    flex: 1; 
 
    display: flex; 
 
    background-color: yellow; 
 
} 
 
.c { 
 
    flex: 1; 
 
    background-color: blue; 
 
} 
 

 
body { margin: 0; }

<div class="a"> 
 
    <div class="b1"> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    </div> 
 
    <div class="b2"> 
 
    <div class="c"> 
 
     miksi et ole full height saatana 
 
    </div> 
 
    </div> 
 
</div>

、その後、適切な実装を検討

Answer 2

div.cの高さと100％の高さは親の高さを取るため、div.aの高さは100％にする必要があります。しかし、高さがないときは、100％で動作しませんでした... https://jsfiddle.net/h2yvoeL0/1/enter code here

乾杯。