Grid容器overflow不生效是因为网格轨道未被约束，子项撑开轨道导致溢出；需在容器设min-width:0/min-height:0、用minmax(0,1fr)定义轨道，并为子项单独处理溢出。
grid容器内容溢出时，为什么overflow不生效
因为 CSS Grid 默认不会限制子项尺寸，grid-template-columns定义的是轨道大小，但子项（尤其是设置了min-width或含内联内容的元素）仍可能撑开轨道，导致整体溢出。此时父容器即使写了overflow: hidden，也常被忽略——根本原因是网格轨道本身没被约束。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给网格容器加
min-width: 0或min-height: 0（取决于溢出方向），强制触发“收缩最小值”行为 - 确保父容器有明确宽度限制（如
width: 100%或max-width），否则overflow无参照基准 - 避免在网格项上写死
width: 100%或min-width: fit-content，它们会抵抗收缩
用fr单位 + minmax()防撑开
fr本身不设上限，纯1fr列遇到长文本或图片仍会无限拉伸。必须配合minmax()限定弹性范围，才能让内容在溢出前自动换行或裁剪。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改写
grid-template-columns: 1fr 1fr为grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 若需保留最小内容宽（比如按钮文字不折行），用
minmax(min-content, 1fr)，但注意min-content可能仍导致溢出 - 对含文本的网格项，额外加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap控制单行截断
子项内部溢出要单独处理
网格容器的overflow只管“容器边界”，不管子项内部内容是否溢出。常见现象是：表格、代码块、长链接在网格项里横向滚动条没出现，或者文字直接冲出右侧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给网格项（即
grid-item）显式设置overflow-x: auto或overflow: hidden - 配合
width: 0或min-width: 0，确保它能真正收缩到可用空间内 - 若子项是
<pre class="brush:php;toolbar:false;"></pre>或<table>，记得加<code>max-width: 100%和overflow-x: auto，否则它们默认无视父容器约束兼容性陷阱：
minmax(0, 1fr)在旧版 Safari 表现异常Safari 14.1 及更早版本对
minmax(0, 1fr)解析不稳定，可能导致列宽归零或错乱。这不是 bug，而是规范实现差异——它把0当成了“无约束”，而非“可收缩下限”。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
minmax(min-content, 1fr)+ 子项width: 100%+box-sizing: border-box - 或加 Safari 特定 hack：
@supports not (min-block-size: 0) { .grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); } } - 真要支持 iOS 14.5 以下，优先用
display: flex替代，Grid 的溢出控制在此类环境下仍是灰区
最易被忽略的一点：网格溢出不是单一属性能解决的，它横跨容器约束、轨道定义、子项行为三层。少设一个
min-width: 0，就可能让整个布局在某个设备上突然右滑失控。 - 降级方案：用
