Bootstrap 4 Flex容器内.container+.row设100%高度Chrome异常问题求助

你碰到的这个问题我之前也遇到过——这其实是Chrome在处理嵌套flex容器百分比高度时的常见兼容性差异，算不上严格意义上的Bug，但确实会和IE11、Firefox、Edge的表现不一致。

问题根源 #

当你给.container和.row加上h-100（也就是height: 100%）时，Chrome不会自动向上追溯父元素的高度上下文来计算子元素高度，而其他几款浏览器会正确继承父级的高度约束，导致.left和.right没法撑满页面100%高度。

亲测有效的解决方案 #

就像你最后找到的方法一样，给.main和.container-fluid添加以下CSS属性就能搞定：

.main, .container-fluid {
  display: flex;
  flex-grow: 1;
}

核心逻辑：

• display: flex 把这两个父元素转为flex容器，建立明确的flex布局上下文
• flex-grow: 1 让它们能占据父元素的剩余可用高度，为子元素的100%高度计算提供正确的基准

如果你的项目基于Bootstrap框架，还可以直接用自带的工具类简化代码：用d-flex替代display: flex，flex-grow-1替代flex-grow: 1，能更好地保持代码风格统一。

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