子 div 在 CSS Flexbox 中溢出超过 100% 的高度(FF/Chrome 不一致)

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

您可以在小提琴：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>
...

这个想法是有一个带有页眉和页脚的弹性框布局。页面的"主要"部分，介于这两者之间，设置为具有：

#wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#page {
  flex-grow: 1;
  overflow: auto;
  height: 100%;
}

#pagediv 有一个孩子div 与

#inner {
     height: 100%;
}

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

我已经检查了几个明显相似的问题，但我似乎找不到解决方案。我宁愿避免使用位置：如果可能的话，绝对。

要修复这个简单的情况，似乎也足以使 #page 成为一个 flex 容器：https://jsfiddle.net/jvilla/kjtLoxct/2/

但是，似乎不支持Chrome中flex容器的非flex子项的%高度。 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.

相关内容

最新更新

热门标签：