网格项需自身设置overflow并配合min-width:0才能滚动，仅容器设overflow无效；还需明确宽高约束、处理长内容换行及滚动条占位问题。Grid容器设了display: grid，但子项内容溢出不滚动？网格项本身不会自动触发滚动，overflow 必须加在**网格项元素自身**上，而不是 Grid 容器。容器设 overflow: hidden 只会裁掉超出容器边界的子项，不会让子项内部产生滚动条。常见错误是给容器加 overflow: auto，结果发现滚动条没出现、内容被截断、甚至布局塌陷------因为 Grid 容器默认不约束子项尺寸，子项会撑开自己，根本"不觉得"要滚动。确保目标元素是网格项（即 grid-item 这类直接子元素），不是容器该元素需有明确的宽高约束（如 width/height、max-width/max-height，或由 Grid 轨道限制住）必须同时设置 overflow-x 或 overflow-y（或简写 overflow），仅设 overflow: auto 在某些浏览器中可能不触发横向滚动Grid轨道固定尺寸下，子项内容溢出仍不滚动？即使 Grid 容器用 grid-template-columns: 200px 1fr 明确设了列宽，子项若未显式限制自身尺寸，依然可能突破轨道边界------尤其当内容含长单词、内联元素或 white-space: nowrap 时。Grid 轨道定义的是"可用空间"，不是"强制截断边界"。子项默认 min-width: auto，会优先保持内容可读性而非服从轨道。立即学习"前端免费学习笔记（深入）"； Fotor AI Image Generator Fotor 平台的 AI 图片生成器