Grid容器的overflow需配合尺寸约束才生效，关键在限制容器宽高或使用minmax()定义轨道，并为子项设min-width:0/min-height:0以允许收缩。
grid容器本身不响应overflow属性
直接给 display: grid 的容器设 overflow: auto 通常没效果——Grid 布局默认会让子项撑开容器，overflow 被“绕过”。真正起作用的是：必须同时限制容器的**尺寸约束**（比如 width/height、max-width/max-height）或使用 minmax() 配合 auto 行/列轨道。
常见错误现象：overflow: scroll 写了但没滚动条，检查父级是否高度塌陷、是否被 align-content: start 拉高、或者 Grid 轨道用了 1fr 却没给容器设 max-height。
- 用
max-height: 300px+overflow-y: auto是最稳妥的组合 - 若用
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr)))，需确保外层有明确高度边界，否则1fr会无限伸展 - Flexbox 容器里嵌 Grid 时，注意 Flex 的
align-items可能干扰子 Grid 的高度计算
grid-template-areas 中内容溢出怎么截断
当用 grid-template-areas 布局，某个命名区域（如 "header"）里的内容超出预设轨道尺寸，overflow 仍要落在该区域的**直接容器**上，而不是整个 Grid 容器。
例如：你写了 grid-area: header 的元素内容过长，得给这个元素自身加 overflow: hidden 或 text-overflow: ellipsis，而不是给 Grid 父容器加。
立即学习“前端免费学习笔记（深入）”；
-
grid-area元素若含文本，记得设white-space: nowrap+text-overflow: ellipsis+overflow: hidden - 若该区域是图片或复杂组件，可套一层
div并设overflow: hidden和height固定值 - 避免对
grid-template-areas中的空格/换行做样式依赖——CSS 不解析这些空白符为布局节点
子项溢出影响其他 grid track 的尺寸
Grid 子项默认按内容尺寸计算，如果某个子项内部有长文本、未约束的图片或 flex: 1 元素，它可能把所在行/列撑大，连带影响同 track 的其他子项。这不是 overflow 问题，而是 track sizing 行为。
解决关键在轨道定义：用 minmax(0, max-content) 替代 max-content，或用 minmax(0, 1fr) 允许收缩；更直接的是给子项加 min-width: 0 / min-height: 0 ——这是 Grid/Flex 里控制“最小尺寸不突破容器”的通用开关。
-
min-width: 0对grid-column: span 2的子项特别重要，否则它拒绝缩小 - 图片溢出常因没设
max-width: 100%，且父容器没设min-width: 0，双重失控 - 不要依赖
overflow: hidden来“掩盖”尺寸失控，先从 track 定义和子项最小尺寸入手
移动端 grid 滚动卡顿或不触发 touch 滚动
iOS Safari 和部分安卓 WebView 对 overflow: auto 在 Grid 容器上的支持较弱，尤其当容器没有 -webkit-overflow-scrolling: touch 或缺少 contain: paint 时，滚动可能卡顿、无法滑动或回弹失效。
实操建议优先降级：把需要滚动的区域抽成独立 div，设 display: block + overflow-y: auto，再把这个 div 放进 Grid 的某个区域。比硬扛 Grid+overflow 组合更可靠。
- 必须加
-webkit-overflow-scrolling: touch（仅 iOS 有效） - 加
contain: paint提升滚动区域渲染性能，但注意兼容性（IE 不支持） - 避免在滚动容器内频繁修改 Grid 的
grid-template-columns，会触发重排
