CSS Grid垂直撑爆问题：如何让.child2滚动避免网格溢出？

问题现象 #

设置了固定高度100px的CSS Grid容器（石灰绿实线边框），但内部带红色虚线边框的.grid-child元素超出了容器范围，本该滚动的.child2也未触发滚动效果。

原因分析 #

1. Grid行高默认行为：CSS Grid未定义grid-template-rows时，行高默认是auto，会完全根据子元素内容自动调整高度，不会强制限制在容器总高度内。哪怕给.grid设置了height:100px，网格行仍会被内容撑高，导致整个容器被撑爆。
2. 百分比高度失效：.grid-child的height:100%是基于所在网格行的高度计算的，而网格行已被内容撑大，这个百分比无法起到约束高度的作用。
3. 滚动条件不满足：.child2的overflow-y:auto需要父元素有明确的高度限制才能生效，但.grid-child的高度未被真正约束，自然无法触发滚动。

解决方案 #

核心是约束网格行的高度，让它不会被内容撑爆，同时适配行数不固定、行高不一致的场景：

修改后的CSS代码：

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(0, 1fr)); /* 关键：用minmax约束行高 */
  height: 100px;
  border: solid lime 2px;
}

.grid-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: dashed red 1px;
}

.child2 {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0; /* 打破flex子元素的最小内容高度限制 */
}

方案说明 #

• grid-template-rows: repeat(auto-fill, minmax(0, 1fr))：auto-fill会根据容器高度自动生成足够的行，minmax(0,1fr)让每行尽可能平分容器空间，同时限制行高不会被内容撑大，确保网格容器保持固定高度。
• min-height:0：flex容器的子元素默认会遵循内容的最小高度，加上这个属性可以打破这个限制，让.child2在内容超出时触发垂直滚动。

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