신장 : 플렉스 박스가있는 플렉스 박스 안에서 100 % 작동하지 않음

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

:

이것은 아마도 모든 것을 설명합니다. 혼자 플렉스 속성 구축 할 수 있습니다 :

• 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.c와 높이는 100 %이므로 부모 높이가됩니다. 그러나 높이가 없을 때, 그것은 100 %로 작동하지 못했습니다 ... https://jsfiddle.net/h2yvoeL0/1/enter code here

건배.