我在使用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>
...
我们的想法是使用带有页眉和页脚的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如果可能的话。
为了解决这个简单的情况，似乎足以使#page成为一个灵活容器：https://jsfiddle.net/jvilla/kjtLoxct/2/
但是，似乎没有支持Chrome中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.