Chrome中Flexbox高度计算异常问题求助

我来帮你拆解下这个问题的根源和解决办法：

问题核心原因 #

你的嵌套Flex容器里，红色div的flex属性设置是导致Chrome无法正确计算高度的关键。你给它写了flex: 1 0 auto，这里的flex-basis: auto意味着这个元素的高度会优先由自身内容决定，而非强制填充父flex容器的剩余空间。虽然视觉上它看起来占满了高度，但实际上它的高度是“内容驱动”的，没有形成一个明确的、可被子元素继承的高度参考。当内部灰色flex容器设置height:100%时，Chrome找不到可以参照的确定高度值，自然就无法正确渲染了。

快速解决方案 #

把红色div的flex属性改成flex: 1（等价于flex: 1 1 0%），或者明确写flex: 1 0 0%。这样flex-basis: 0%会强制让这个元素的初始高度为0，再通过flex-grow:1去填充父flex容器的剩余可用空间，此时它的高度就变成了一个明确的、基于父容器的数值，内部灰色容器的height:100%就能正确继承这个高度了。

修改后的代码示例：

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%">
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <div style="width: 100%; flex: 1; background: red">
      <div style="display: flex; flex-direction: row; width: 100%; height: 100%; background: gray">
        <div style="height: 100%; flex: 1">测试内容</div>
      </div>
    </div>
  </div>
</div>

补充说明 #

这个问题本质是Chrome严格遵循Flexbox规范中“百分比高度依赖明确高度上下文”的规则，部分其他浏览器可能有容错处理，但遵循规范的写法能保证跨浏览器的一致性。

内容的提问来源于stack exchange，提问作者Karsten Pedersen