CSS Grid布局下嵌套孙元素overflow滚动条失效问题咨询

你遇到的这个异常是Grid布局的默认最小尺寸规则导致的。
当你给Grid容器用1fr定义行高时，Grid项目（即你代码中的.middle中间层元素）的默认min-height属性值为auto，这意味着Grid项目会优先适配内容高度，不会主动收缩到小于内容高度的尺寸，因此内层.inner元素设置的height: 100%实际是跟随中间层被内容撑开的高度计算，自然不会触发overflow: auto的滚动条。

以下两种修改方式任选其一即可修复问题：

• 方案1：给中间层Grid项目添加min-height: 0，覆盖默认的auto规则，强制中间层遵守高度约束

.middle {
  height: 100%;
  min-height: 0; /* 新增此行即可修复 */
}

• 方案2：修改Grid容器的行高定义，显式指定行的最小高度为0

.outer.grid {
  display: grid;
  grid-template-rows: minmax(0, 1fr); /* 将原1fr替换为此定义 */
}

为什么没有中间层时不会出现该问题？
当不存在中间层，.inner本身就是Grid项目时，你给.inner直接设置的height: 100%和overflow: auto已经显式约束了Grid项目的尺寸规则，不会触发默认的min-height: auto适配内容的逻辑，因此滚动条可以正常生效。

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