Grid容器需手动设置高度约束并启用overflow才能触发滚动条，网格项滚动须满足三条件：直接子元素、明确尺寸限制、min-width/min-height设为0。
Grid 容器设了 display: grid，但子元素内容溢出却不出现滚动条——不是 CSS 写错了，是滚动行为根本没被触发。关键在于：滚动条只在「内容真实尺寸 > 容器约束尺寸」时才生成，而 Grid 容器默认不施加这种约束。
给 Grid 容器加 overflow: auto 为什么无效？
因为容器自身没有明确的高度边界，overflow 就像一扇没装在墙上的门——没墙，就无所谓“开”或“关”。浏览器计算出的容器高度是 auto（比如 getComputedStyle(container).height 返回 auto），内容再长也不会“溢出”，自然不显示滚动条。
- 常见写法
grid-template-rows: 1fr或100%不构成约束，它让行高随内容伸展 -
height: 100vh看似有界，但如果父级（如body）没重置margin或padding，实际总高仍可能超限 - 用
overflow: hidden替代auto更危险：它直接裁剪内容，连滚动机会都没留
让网格项内部可滚动的三个硬性条件
滚动必须发生在网格项（即 grid-item）自身上，不是容器。但光加 overflow: auto 还不够，缺一不可：
- 该网格项必须是 Grid 容器的**直接子元素**（不能是孙辈或更深层）
- 必须设置明确的尺寸约束：
width/max-width或height/max-height（推荐用max-height，更健壮） - 必须加
min-width: 0（横向滚动）或min-height: 0（纵向滚动）——这是最常漏掉的一环，否则子项会坚持撑开自己，拒绝收缩 - 若内容含长单词或 URL，额外加
word-break: break-word或overflow-wrap: break-word
overflow: auto 出现后滚动条抖动或右侧留白？
这是滚动条占位导致的布局重排，在 Windows 和旧版 macOS 上尤其明显。Grid 对尺寸敏感，抖动会被放大。
立即学习“前端免费学习笔记（深入）”；
- 现代方案：
scrollbar-gutter: stable（Chrome/Edge/Firefox 支持），自动预留滚动条空间 - 兼容方案：给网格项加
padding-right: 16px+overflow-y: auto，再用::-webkit-scrollbar { display: none; }隐藏滚动条轨道（注意：隐藏后仍可滚，只是无视觉提示） - 别用
overflow: overlay——仅 Safari 支持，且已逐步弃用
真正卡住人的从来不是「怎么写」，而是「谁该负责滚动」和「谁来划那条边界线」。Grid 容器不自动截断，网格项也不自动收缩——这两点必须手动补全，少一个，滚动就静默失效。
