Question

我正在尝试使用嵌套容器创建一个简单的flexbox布局。

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

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

<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％

设定位置：相对;在孩子的父母身上。
设定位置：绝对;对孩子说。
然后，您可以根据需要设置宽度/高度（样本中为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>

父母有＆＃34; flexbox-item＆＃34;类。所以它在你的＆＃34;项目与文本＆＃34;之间添加了一些padd。和你的弹性容器

Updated Fiddle

嵌套的flex容器未伸展到剩余空间

2 个答案: