Flexbox - 无法防止内容区域中的 div 与页脚重叠

Question

我有一个使用列 flexbox 的网页，具有固定大小的页眉和页脚，以及占用剩余空间的内容区域。这很好用。

内容区域是一个行 flexbox，我有 2 个并排的方形 div。我通过使用 padding-bottom 使它们成为正方形。这很好用，除非窗口大于内容区域高度的 2 倍。然后我的方块开始渗入页脚，因为填充是基于元素宽度的。

我希望方块永远不会与页脚重叠。我可以接受广场右侧的死角。如果可能的话，我想坚持使用 flexbox 并避免浮动。只需要支持现代浏览器。

这可能只使用 CSS 吗？或者这是 JS 的工作。

Fiddle

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    display: flex;
    flex-flow: column;
    height: 100%;
}
div {
    border: 1px solid tomato;
    box-sizing: border-box;
    margin: 0;
    padding: 2px;
}
#header {
    flex: 0 0 5em;
}
#footer {
    flex: 0 0 5em;
}
#content {
    background: blue;
    display: flex;
    flex: 1 1 auto;
    flex-flow: row wrap;
    min-height: 30%;
}
#content > div {
    background: tomato;
    border-color: black;
    flex: 1 0 auto;
    max-height: 50%;
    padding-bottom: 50%;
}

<div id="box">
<div id="header">
    <p><b>header</b>
    </p>
</div>
<div id="content">
    <div id='am'></div>
    <div id='pm'></div>
</div>
<div id="footer">
    <p><b>footer</b>
    </p>
</div>
</div>

TIA！

Answer 1

简单的解决方案：

#box
{
    display: flex;
    flex-flow: column;
    min-height: 100%; /* this*/
}

JSfiddle Demo

注意：这假设您希望页面溢出...但我没有看到任何关于将页面高度包含到视口的参考。