CSS嵌套彈性盒高度

Question

我有根容器的第二個flex項中的嵌套彈性容器的行佈局。我想嵌套的柔性容器是其父母的高度的的100％。

<div class="steps root"><!--root container--> 
<div class="step one"> 
    I am very tall. Others should be as high as I am! 
</div> 
<div class="step two-and-three"> 
    <div class="steps"><!--nested container--> 
     <div class="step two"> 
      nested child 1. should have 100% vertical height 
     </div> 
     <div class="step three"> 
      nested child 2. should have 100% vertical height 
     </div> 
    </div> 
</div> 

這裏是小提琴演示該問題：http://jsfiddle.net/2ZDuE/316/

如果我設置明確的高度，以我的嵌套的柔性容器，然後一切正常。

如何告訴嵌套容器自動填充其容器的垂直空間？

Answer 1

添加display:flex到.step.two-and-three和刪除padding-bottom

.steps.root { 
 
    width: 700px; 
 
} 
 
.steps.root>.step.one { 
 
    height: 300px; 
 
    /*simulate big content in left column*/ 
 
} 
 
.steps { 
 
    display: flex; 
 
} 
 
.step.one { 
 
    flex: 1 1 33%; 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 
.step.two-and-three { 
 
    flex: 2 1 66%; 
 
    background-color: grey; 
 
    display: flex; /* added */ 
 
} 
 
.step.two { 
 
    flex: 1 1 50%; 
 
    background-color: green; 
 
} 
 
.step.three { 
 
    flex: 1 1 50%; 
 
    background-color: lime; 
 
} 
 
.step.two-and-three>.steps { 
 
    background-color: olive; 
 
    padding-bottom: 10px; 
 
}

<div class="steps root"> 
 
    <!--root container--> 
 
    <div class="step one">I am very tall. Others should be as high as I am!</div> 
 
    <div class="step two-and-three"> 
 
    <div class="steps"> 
 
     <!--nested container--> 
 
     <div class="step two">nested child 1. should have 100% vertical height</div> 
 
     <div class="step three">nested child 2. should have 100% vertical height</div> 
 
    </div> 
 
    </div> 
 
</div>