嵌套柔性容器没有伸展到剩余空间

Question

我想创建一个简单的柔性箱布局与嵌套容器。

它有效，当我有一个容器，并使用全宽+高。

问题是嵌套容器也使用display: flex，不知何故，嵌套容器不会使用所有剩余的空间（只有当它们具有定义的宽度/高度时才起作用）。

screenshot of the problem

jsfiddle view of the problem

<div class="flexbox-parent"> 
<div class="flexbox-item header"> 
    Header 
</div> 

<div class="flexbox-item fill-area content flexbox-item-grow"> 
    <div class="fill-area-content flexbox-item-grow"> 
     <div class="flexbox-parent"> 
      <div class="flexbox-item header"> 
       2nd layer header 
      </div> 
      <div class="flexbox-item fill-area content flexbox-item-grow"> 
       <div class="fill-area-content flexbox-item-grow"> 
        <strong>How to make this section use all the remaining space? </strong><br/> 
        It should also overflow:auto if too much data. 
        <br/> 

       </div> 
      </div> 
      <div class="flexbox-item footer"> 
       2nd layer Footer 
      </div> 
     </div> 
    </div> 
</div> 

<div class="flexbox-item footer"> 
    Footer 
</div> 

html, body 
{ 
    width: 100%; 
    height: 100%; 
} 

.flexbox-parent 
{ 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: 100%; 
    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 
    background: rgba(255, 255, 255, .1); 
} 

.flexbox-item {padding: 8px;} 
.flexbox-item-grow { 
    flex: 1; /* same as flex: 1 1 auto; */ 
} 

.flexbox-item.header { background: rgba(255, 0, 0, .1);} 
.flexbox-item.footer { background: rgba(0, 255, 0, .1);} 
.flexbox-item.content{ background: rgba(0, 0, 255, .1);} 

.fill-area 
{ 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 
} 
.fill-area-content{ 
    background: rgba(0, 0, 0, .3); 
    border: 1px solid #000000; 

    /* Needed for when the area gets squished too far and there is content that can't be displayed */ 
    overflow: auto; 
} 

Answer 1

其实答案已经存在于this stackoverflow thread

获得柔性项的孩子填写身高100％

1. 设置位置：相对;在孩子的父母身上。
2. 设置位置：绝对;对孩子。
3. 然后，您可以根据需要设置宽度/高度（在我的示例中为100％）。

Updated fiddle

<div class="flexbox-parent"> 
    <div class="flexbox-item header"> 
     Header 
    </div> 

    <div class="flexbox-item fill-area content flexbox-item-grow"> 
     <div class="fill-area-content flexbox-item-grow" style="position:relative;"> 
      <div class="flexbox-parent" style="position:absolute;"> 
       <div class="flexbox-item header"> 
        2nd layer header 
       </div> 
       <div class="flexbox-item fill-area content flexbox-item-grow"> 
        <div class="fill-area-content flexbox-item-grow"> 
         <strong>How to make this section use all the remaining space? </strong><br/> 
         It should also overflow:auto if too much data. 
         <br/> 

        </div> 
       </div> 
       <div class="flexbox-item footer"> 
        2nd layer Footer 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="flexbox-item footer"> 
     Footer 
    </div> 
</div> 

Answer 2

.flexbox-item {padding: 8px;} 

你在这个类中添加一些填充。看到这个

<div class="flexbox-item fill-area content flexbox-item-grow"> 
      <div class="fill-area-content flexbox-item-grow"> 
       <strong>How to make this section use all the remaining space? </strong><br/> 
       It should also overflow:auto if too much data. 
       <br/> 

      </div> 
     </div> 

父母有“flexbox-item”类。因此它加入你之间的一些PADD“项目文本”和你的Flex容器

Updated Fiddle