子 div 在 CSS Flexbox 中溢出超过 100% 高度（FF/Chrome 不一致）答案

【问题标题】：Child div overflowing past 100% height in CSS Flexbox (FF/Chrome inconsistency)子 div 在 CSS Flexbox 中溢出超过 100% 高度（FF/Chrome 不一致）
【发布时间】：2018-02-20 03:09:04
【问题描述】：

我在使用 flexbox 将 div 调整到其父级的高度时遇到了一些麻烦。该问题仅在 Chrome (48) 下发生，它在 Firefox (44) 中正确呈现（或我理解为正确的）。

您可以在 Fiddle 中查看：https://jsfiddle.net/jvilla/kjtLoxct/1/

布局类似于：

...
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="page">
    <div id="inner"></div>
  </div>
  <div id="footer"></div>
</div>
...

这个想法是有一个带有页眉和页脚的 flexbox 布局。页面的“主要”部分，在这两者之间，设置为：

#wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#page {
  flex-grow: 1;
  overflow: auto;
  height: 100%;
}

并且#page div有一个子div

#inner {
     height: 100%;
}

但是，内部 div 会溢出父级。如果您使用检查器（总高度 - 页眉 - 页脚），则父 div 具有正确的大小，但内部 div，尽管 100% 高度规则应将其高度设置为其父级，但会溢出它。

我检查了几个明显相似的问题，但似乎找不到解决方案。如果可能的话，我宁愿避免使用 position: absolute。

【问题讨论】：

可能相关：Rendering problems using flexbox in Firefox and Chrome 48
可能相关：Heights rendering differently in Chrome and Firefox

标签： html css flexbox

【解决方案1】：

要解决这个简单的情况，将#page 设置为 flex 容器似乎就足够了：https://jsfiddle.net/jvilla/kjtLoxct/2/

但是，Chrome 中似乎不支持 flex 容器的非 flex 子项的 %-heights。 http://caniuse.com/#search=flexbox.

为了解决更复杂的情况，也可以将#page 设置为弹性容器，它会获得适当的高度，然后使用#page 作为参考来调整内部 div 的大小。例如：

var p = document.getElementById('page');
var i = document.getElementById('inner5'); // Div is stacked deep into #page
i.style.height = p.clientHeight + 'px'; // 100%, calculate as needed.

【讨论】：