网格项需单独设置 overflow 并配合 min-width: 0、尺寸约束才能生效，仅设 Grid 容器 overflow 无效；关键在于重置默认 min-width: auto，使网格项可收缩并触发内部滚动。
网格项超出容器时不会自动滚动，必须在网格项自身上设置 overflow 并配合尺寸约束和收缩行为才能生效。只给 Grid 容器设 overflow 是无效的。
关键：滚动必须加在网格项上，不是容器
Grid 容器设了 display: grid，但子项内容溢出不出现滚动条？问题出在作用对象错了。overflow 属性不会继承，也不会自动影响子项的尺寸计算逻辑。容器上设 overflow: auto 只会裁剪掉“跑出容器边界的子项部分”，而不会让子项内部产生滚动条——因为子项默认按内容撑开，根本没觉得自己需要滚动。
- 确认目标元素是 Grid 容器的直接子元素（即真正的网格项）
- 给这个网格项显式设置
overflow-x: auto或overflow-y: auto（简写overflow: auto在某些浏览器中对横向滚动支持不稳定） - 避免只在容器上写
overflow: hidden或auto，那只会隐藏或截断，不触发子项内滚动
必须有明确的宽高约束
即使网格轨道写了 grid-template-columns: 200px 1fr，如果网格项没被限制尺寸，它仍可能突破轨道宽度。Grid 轨道定义的是“可用空间”，不是“强制边界”。子项默认 min-width: auto，会优先保持内容完整，拒绝收缩。
- 给网格项设置固定宽高，如
width: 200px、max-width: 100%或height: 200px、max-height: 150px - 若依赖轨道尺寸，需确保轨道本身可收缩：把
1fr换成minmax(0, 1fr)，否则长单词或图片会让轨道被迫拉宽 - 对含长文本的项，额外加
word-break: break-word或overflow-wrap: break-word防止单行撑开
让网格项能真正收缩：min-width: 0 是核心
这是最容易被忽略却最关键的一环。网格项默认 min-width: auto，相当于“宁可撑破容器，也不折行或滚动”。只有把它重置为 min-width: 0，才能让它服从轨道约束，进而让 overflow 生效。
立即学习“前端免费学习笔记（深入）”；
- 直接写
min-width: 0（推荐，语义清晰、兼容性好） - 或用
overflow: hidden间接触发——该属性会隐式将min-width重置为 0，但会同时隐藏所有溢出内容 - 如果网格项内部还有 flex 或 inline 元素，也建议在其外层包裹块级容器并同样设置
min-width: 0
滚动条占位导致布局抖动？这样处理
滚动条出现时会挤占内容宽度，尤其在 Windows 上始终显示，macOS 默认隐藏但 hover 才出现，容易造成视觉跳动或右侧留白。
- 用
overflow-y: overlay（仅 Chromium 系列支持）可让滚动条浮动不占位 - 更通用的做法：给网格项加
padding-right: 16px（预估滚动条宽度），再用margin-right: -16px抵消，保持内容区域宽度一致 - 或统一用
overflow-y: scroll强制显示滚动条，避免状态切换，适合管理型后台界面
