Grid容器overflow生效需限制其尺寸并设overflow:auto，或在子项上设置overflow:auto+min-width:0/min-height:0以突破默认最小尺寸保护。
Grid 容器本身不响应 overflow，关键在子项或滚动容器
直接给 display: grid 的父容器设 overflow: auto 通常无效——因为 Grid 轨道默认会自动扩展容纳内容，除非你明确限制了容器尺寸且子项未被约束。真正起作用的是：给 Grid 容器设固定宽高 + overflow: auto，或把溢出控制交给某个特定子网格项（比如一个 article 区域）。
必须限制容器尺寸才能触发 overflow: auto
Grid 布局中，overflow 是否生效，取决于容器是否「有边界」。常见漏掉的步骤：
- 忘记给 Grid 容器设
width/height或max-width/max-height - 用
minmax(0, 1fr)替代1fr，防止子项撑大轨道（尤其配合overflow时） - 子项设置了
white-space: nowrap或固定宽高但未设overflow，导致溢出穿透到外层
示例：让中间一列可滚动
.grid {
display: grid;
grid-template-columns: 200px 1fr 200px;
height: 400px; /* 必须有高度 */
}
.sidebar { overflow: hidden; }
.main {
overflow: auto; /* 滚动发生在 main 这个子项上 */
min-width: 0; /* 防止 flex/grid 子项不收缩 */
}
min-width: 0 和 min-height: 0 是隐藏关键点
Grid 子项默认有最小尺寸保护（min-width: auto），这会让 overflow 失效——即使你写了 overflow: auto，浏览器仍优先拉伸内容而非显示滚动条。解决方式很固定：
立即学习“前端免费学习笔记（深入）”；
- 对需要滚动的子项显式设置
min-width: 0（行内文本/图片场景）或min-height: 0（垂直内容） - 若子项是嵌套 Grid/Flex，也要在其内部加
min-width: 0 - 不用
width: 0或flex-basis: 0替代，它们语义不同，不一定触发收缩
避免在 grid-template-areas 中误判溢出位置
用命名区域布局时，容易以为 overflow 应该加在容器上，结果发现滚动条没出现。实际应检查：
- 对应命名区域的元素（如
）是否已设overflow: auto和min-width: 0 - 该元素是否被其父 Grid 轨道「撑开」：确认
grid-template-rows/columns没写死过大值（如minmax(300px, 1fr)会阻止收缩） - 是否存在
align-items: stretch（默认值）导致子项被拉高，掩盖了overflow效果
复杂嵌套下，溢出行为往往由最内层带 min-width: 0 + overflow 的元素决定，而不是 Grid 容器本身。
