使用 display:flex 使用 CSS 填充剩余的垂直空间-PHP中文网问答

在 3 行布局中：

顶行的大小应根据其内容而定
底行应具有固定的高度（以像素为单位）
中间行应展开以填充容器

问题在于，随着主要内容的扩展，它会挤压页眉和页脚行：

section {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: 300px;
}
header {
  flex: 0 1 auto;
  background: tomato;
}
div {
  flex: 1 1 auto;
  background: gold;
  overflow: auto;
}
footer {
  flex: 0 1 60px;
  background: lightgreen;
  /* fixes the footer: min-height: 60px; */
}

<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break - ->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

小提琴：

http://jsfiddle.net/7yLFL/1/（正在运行，内容较少）
http://jsfiddle.net/7yLFL/（已损坏，内容较大）

我很幸运，可以使用最新、最好的 CSS，而无需考虑旧版浏览器。我想我可以使用弹性布局来最终摆脱旧的基于表格的布局。由于某种原因，它没有做我想做的事......

根据记录，SO上有很多关于“填充剩余高度”的相关问题，但没有任何问题可以解决我在使用flex时遇到的问题。参考资料：

让 div 填充剩余屏幕空间的高度
填充剩余的垂直空间 - 仅 CSS
与另一个 div 共享容器时是否有一个 div 来填充容器的剩余高度/宽度？
使嵌套 div 拉伸至剩余容器 div 高度的 100%
如何使 Flexbox 布局占据 100% 垂直空间？
等等