设置height:100%后子元素仍溢出容器的问题排查

问题根源 #

在Grid布局中，默认情况下行轨道的高度为auto——即使你给Grid容器设置了固定高度，当网格项（grid item）内的内容超过轨道初始高度时，行轨道会自动拉伸以容纳内容。这就导致你设置的height: calc(100% - 40px)中的100%参考值不是容器的固定高度，而是被内容撑开后的行轨道高度，最终表现为该属性“失效”，子元素随内容溢出容器。

ChatGPT建议的grid-template-rows: 100%仅在单行单元素场景下有效，因为它强制行轨道高度等于容器高度，但当存在多个子元素时，固定的100%行轨道无法合理分配空间，依然会出现溢出问题。

通用解决方案 #

核心是让Grid行轨道不被内容撑开，严格遵循容器的高度分配规则。使用minmax(0, 1fr)定义行轨道，既保证轨道能占满分配的空间，又限制其不会因内容膨胀超出容器边界。

1. 单列单行场景（你的原始需求）

修改Grid容器的CSS，添加grid-template-rows: minmax(0, 1fr)：

#container {
  display: grid;
  height: 150px;
  background-color: green;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr); /* 关键：约束行轨道不被内容撑开 */
}

#child {
  margin: 20px;
  height: calc(100% - 40px); /* 此时100%参考的是行轨道高度（即容器高度） */
  background-color: red;
  display: flex;
  flex-direction: column;
}

#grandchild {
  overflow: auto;
  flex: 1;
}

此时子元素的高度会被正确约束，grandchild区域超出部分将自动滚动，标题保持固定不随内容滚动。

2. 单列多行场景（多个子元素）

如果容器内有两个子元素，只需将行轨道设置为多个minmax(0, 1fr)，让它们平分容器高度：

#container {
  display: grid;
  height: 300px;
  background-color: green;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); /* 两个行轨道各占一半高度 */
  gap: 10px;
}

/* 子元素样式保持不变 */
#child {
  margin: 20px;
  height: calc(100% - 40px);
  background-color: red;
  display: flex;
  flex-direction: column;
}

#grandchild {
  overflow: auto;
  flex: 1;
}

两个子元素都会被约束在各自的行轨道内，不会溢出容器。

补充优化 #

若子元素使用margin导致高度计算复杂，也可改用padding配合box-sizing: border-box，简化高度设置：

#child {
  padding: 20px;
  height: 100%;
  box-sizing: border-box; /* 让padding包含在高度内，无需手动计算margin差值 */
  background-color: red;
  display: flex;
  flex-direction: column;
}

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