CSS Chrome 中的 Flexbox 容器没有达到 100% 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36221882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox container in Chrome doesn't get 100% height
提问by fotonmoton
Flexbox column container inside another flex container doesn't get 100% height in Chrome, but in Firefox and Edge all ok.
另一个 flex 容器中的 Flexbox 列容器在 Chrome 中不会获得 100% 的高度，但在 Firefox 和 Edge 中一切正常。
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
回答by Michael Benjamin
You're missing a height: 100%on a parent element: <header>
您缺少height: 100%父元素上的 a ：<header>
Once you add that in, the layout works in Chrome, as well.
添加后，该布局也可以在 Chrome 中使用。
header {
min-height: 100%;
width: 100%;
height: 100%; /* NEW */
}
When using percentage heights, Chrome requires that each parent element have a defined height. More details here:
使用百分比高度时，Chrome 要求每个父元素都有一个定义的高度。更多细节在这里：
When using percentage heights in flexbox, there are rendering differences among the major browsers. More details here:
在 flexbox 中使用百分比高度时，主要浏览器之间存在渲染差异。更多细节在这里：
