带滚动区域的嵌套弹性框

Question

我正在尝试在最新的Chrome,Firefox和IE11中实现这种布局:

我可以使用以下内容:

html {
  box-sizing: border-box;
}
*, *:before, *:after { 
  box-sizing: inherit;
}

html, body { height: 100%; padding: 0; margin: 0; }

p { line-height: 2em; }

header, footer, article { padding: 10px; }

#parent {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background-color: limegreen;
}

#parent > header {
    flex: none;
    background-color: limegreen;
}

#parent > footer {
    flex: none;
}

#child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    min-height: 0;
}

#child > header {
    flex: none;
    background-color: #aaa;
}
#child > article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#child > footer {
    flex: none;
    background-color: #aaa;
}

<section id="parent">
    <header>Parent flex header </header>
    
    <section id="child" >
        <header>Child flex header</header>
        <article>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
        </article>
        <footer>Child flex footer</footer>
    </section>
    
    <footer>Parent flex footer</footer>
</section>

然而,我发现有些CSS有点奇怪,我想确保我有最大机会不生成会破坏某些浏览器更新的CSS.原因是该软件将在实际硬件上运行(类似于您的路由器管理界面),并且无法像常规网站那样轻松更新.

所以麻烦我的CSS是可滚动的article:

#child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    min-height: 0;
}

我摆弄着它,height并min-height使它在这三个方面都有效.最初我height: 100%只有,但这在Firefox中不起作用.指定min-height: 0可以在Chrome和FF中使用,但不能在IE中使用.这个组合似乎满足了所有3个,但谁是正确的？我可以合理地确定下一个FF或Chrome不会破坏吗？从"规范角度"看这段代码是否有意义？

Answer 1

min-height确实需要设置，并且正确的方式来实现所需的布局。从规范：

默认情况下，弹性项目不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置 min-width 或 min-height 属性。

因此，只有通过设置min-height，您<article>才能真正使用flex-shrink并适应父 flex 容器。

如果我没看错，您在 IE 中看到的问题与此处描述并在此处确认的错误相匹配：

在 IE 10-11 中，列方向的 flex 容器上的 min-height 声明用于调整容器本身的大小，但它们的 flex item 子项似乎不知道其父项的大小。它们就好像根本没有设置高度一样。

这可能（也可能不）包含有关溢出的问题。