带overflow的flex父容器中子div设置height:100%无法铺满的原因及解决方法

这问题我之前踩过坑！核心原因在于flex布局中百分比高度的计算基准：当你给.right设置height: 100%时，这个100%是参考父容器.main的可视高度（也就是你设置的max-height: 100px），而非左侧元素撑开后产生的滚动内容高度。

另外，虽然flex默认的align-items: stretch会让子元素在垂直方向拉伸，但当父容器开启了overflow-y: scroll后，这个拉伸行为只会作用于容器的可视区域，不会延伸到滚动出来的内容高度，所以.right自然没法铺满整个滚动区域。

方案一：利用flex原生特性优化（推荐） #

去掉.right的height: 100%，改用flex: 1让它占据剩余宽度（替代width: 100%），依赖flex默认的align-items: stretch特性，自动匹配左侧元素的高度：

.main{ 
  display: flex; 
  background: #09f; 
  width: 100%; 
  max-height: 100px; 
  overflow-y: scroll; 
} 
.left{ 
  background: #ef5523; 
  min-height: 200px; 
} 
.right{ 
  flex: 1; // 占据父容器剩余宽度，替代width:100%
  background: #99ff99; 
  // 移除height:100%，让flex自动拉伸高度
}

这样修改后，.right会自动跟随.left的高度变化，不管父容器滚动多少，都能铺满整个内容高度。

方案二：改用Grid布局（更直观的等高布局） #

如果flex的逻辑让你觉得绕，Grid布局的天然等高特性可以完美解决这个问题，代码更简洁：

.main{ 
  display: grid;
  grid-template-columns: auto 1fr; // 左侧宽度自适应，右侧占满剩余空间
  background: #09f; 
  width: 100%; 
  max-height: 100px; 
  overflow-y: scroll; 
} 
.left{ 
  background: #ef5523; 
  min-height: 200px; 
} 
.right{ 
  background: #99ff99; 
}

Grid布局中同一行的单元格默认就是等高的，不需要额外设置高度属性，.right会自动匹配.left的高度，完全覆盖滚动区域。

内容的提问来源于stack exchange，提问作者WEB Last Wolf