CSS3 Flexbox布局在Chrome中异常（Firefox正常）求助

我看了你的布局代码，问题出在Chrome对flex项目的min-height默认值处理上——Firefox会自动适配这种嵌套flex的高度约束，但Chrome里，flex项目默认的min-height: auto会让.x-body被内部内容撑开，导致两列布局无法固定在视口高度内。

修复方案 #

只需要给.x-body添加min-height: 0属性，强制它遵守父容器的高度约束，这样内部的两列布局就能正确占满剩余空间，不会被内容撑出：

html, body { height: 100%!important; width: 100%!important; margin: 0!important; padding: 0!important; }
.x {display: flex; flex-direction: column; height: 100%; width: 100%;}
.x-header {background-color: silver;}
.x-body {flex: 1 1 auto; overflow-y: auto; min-height: 0; /* 新增这一行 */}
/* CONTENT WITH 2 COLUMNS */
.x-structure-2-columns {display: flex; flex-direction: row; height: 100%; width: 100%;}
.x-structure-2-columns-left {background-color: lightgreen; width: 100px;}
.x-structure-2-columns-right {display: flex; flex: 1 1 auto; overflow-y: auto; flex-direction: column;}
.x-structure-2-columns-right-header {background: yellow;}
.x-structure-2-columns-right-body {flex: 1 1 auto; overflow-y: auto; min-height: 0px; background: pink;}

原理说明 #

在Chrome中，当一个元素是flex容器的子项（.x-body是.x的子项且flex:1），它默认的min-height: auto会让它优先适配内部内容的高度，而不是严格遵循父容器的height:100%。添加min-height:0后，就打破了这个默认行为，让它可以被压缩到父容器的高度范围内，内部的滚动区域也能正常工作。

修改后Chrome和Firefox的表现就一致了：两列固定显示在视口高度内，超出内容的部分会在各自的滚动区域内滚动。

内容的提问来源于stack exchange，提问作者6epcepk