CSS Grid 溢出需同时设置容器 overflow 和子项 min-width/min-height: 0；否则默认 min-width: auto 会撑开轨道。可实现整体滚动、子项局部滚动或 hidden 裁剪。
当 CSS Grid 容器内的子元素内容超出容器尺寸时，不会自动触发滚动或裁剪——因为 Grid 容器默认的 overflow 是 visible，且 grid 本身不直接限制子项尺寸。真正起作用的是容器自身的 overflow 属性，以及子项的尺寸行为（如是否设置了 min-width: 0 或 overflow）。下面分情况说明怎么控制溢出。
给 grid 容器设置 overflow 触发滚动
如果希望整个网格区域可滚动（比如固定宽高、内容超长），直接在 grid 容器上设置 overflow 即可：
-
overflow: auto：内容溢出时才显示滚动条（推荐） -
overflow: scroll：始终显示滚动条（含空闲时） -
overflow-x / overflow-y：分别控制横向或纵向滚动
⚠ 注意：仅设置 overflow 不够——若子项是文本、flex 或 grid 内部嵌套块，它们可能因默认最小尺寸（min-width: auto）撑开容器，导致滚动失效。此时需配合重置子项的最小尺寸。
防止子项撑大网格轨道（关键细节）
Grid 子项默认有 min-width: auto 和 min-height: auto，遇到长文本、图片或内联元素时会拒绝收缩，从而突破 grid-template-columns 的设定。解决方法是在子项上显式设：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0（对行内文本/图片等横向溢出有效） -
min-height: 0（对纵向内容溢出有效） - 或简写：
min-width: 0; min-height: 0;
常见写法示例：
.grid-item { min-width: 0; overflow: hidden; }
这样，即使里面是超长无空格字符串（如一串 base64），也会被截断或触发内部滚动（取决于是否设了 overflow）。
让子项内部独立滚动（局部滚动）
不想整个 grid 容器滚动，而是某个子项自己可滚动（比如侧边栏列表、日志面板），那就把 overflow 设在该子项上，并确保它有明确高度/宽度约束：
- 给子项设
height: 200px（或max-height） +overflow-y: auto - 同时别忘了加
min-width: 0防止文本撑宽 - 若子项内是 flex/grid 布局，其子代也建议设
min-width: 0
例如一个卡片内嵌长描述：
.card-desc { height: 120px; overflow-y: auto; min-width: 0; }用 overflow: hidden 裁剪而非滚动
如果只是想简单隐藏溢出部分（不滚动、不换行），除了在容器设 overflow: hidden，仍要处理子项的最小尺寸问题：
- 容器设
overflow: hidden - 对应子项设
min-width: 0（否则可能仍溢出） - 配合
text-overflow: ellipsis实现文字省略（需同时设white-space: nowrap和width）
纯裁剪适合头像、图标容器、标签栏等强调视觉一致性的场景。
