我正在尝试在最新的 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>However我觉得有些 CSS 有点奇怪，我想确保我有最大的机会不生成会在某些浏览器更新中损坏的 CSS。原因是该软件将在实际硬件上运行（有点像路由器管理界面），并且无法像常规网站那样轻松更新。
所以让我烦恼的 CSS 是可滚动的article:
#child {
display: flex;
flex-direction: column;
background-color: red;
height: 100%;
min-height: 0;
}
我摆弄着height and min-height使其在这三个方面都发挥作用。本来我有height: 100%只是，但这在 Firefox 中不起作用。指定min-height: 0可以在 Chrome 和 FF 中使用，但不能在 IE 中使用。这个组合似乎让三个人都满意，但谁是正确的呢？我可以合理地确定这不会在下一个 FF 或 Chrome 中出现问题吗？从“规范角度”来看，这段代码有意义吗？
Setting min-height确实是必需的，并且是实现所需布局的正确方法。从规格来看:
默认情况下，弹性项目不会缩小到低于其最小内容大小（最长单词或固定大小元素的长度）。要更改此设置，请设置 min-width 或 min-height 属性。
所以只能通过设置min-height你允许你的<article>实际利用flex-shrink并适合父级弹性容器。
如果我正确地看到了这一点，那么您在 IE 中看到的问题与该错误相符此处描述并承认here:
在 IE 10-11 中，列方向上的 Flex 容器的最小高度声明可用于确定容器本身的大小，但它们的 Flex 项目子项似乎不知道其父项的大小。它们的表现就好像根本没有设定高度一样。
这可能（也可能不）包含有关溢出的问题。