overflow单独加在Grid容器上无效，因撑破源于轨道被min-content拉宽；必须同时将1fr替换为minmax(0, 1fr)并给直接子项设min-width: 0，才能使overflow: hidden等样式生效。
直接说结论：overflow 单独加在 Grid 容器上基本无效，min-content 也不是能直接设的 CSS 属性——真正起作用的是 minmax(0, 1fr) 和 min-width: 0 的组合，且必须作用在正确层级。
为什么 overflow: hidden 加在 grid 容器上没用
Grid 容器的 overflow 控制的是“容器自身内容溢出”，但撑破行为往往发生在轨道（track）层面：当子项内容宽度 > 分得的轨道宽度时，浏览器会先拉宽轨道，再把内容塞进去——此时内容根本没“溢出容器”，而是让容器被动变宽了。
-
overflow: hidden只裁剪超出容器边界的像素，不干预轨道计算逻辑 - 常见误操作：给
.grid { overflow: hidden; }加了，但列还是被长 URL 撑开 - 真正该加
overflow的是网格子项（.grid-item），且必须配合min-width: 0
min-content 不是 CSS 属性，而是计算值
min-content 是浏览器内部用于衡量“内容最小可缩宽度”的关键词，比如一个无空格长单词的自然宽度。它不能直接写成 min-content: 100px 这种声明，但会在多个地方隐式生效：
-
1fr默认等价于minmax(min-content, 1fr)，所以长文本会强制撑开轨道 -
grid-template-columns: auto中的auto就是按min-content计算 - 想绕过它？就得显式覆盖下限，比如用
minmax(0, 1fr)或给子项加min-width: 0
必须同时改两处：轨道定义 + 子项样式
只改一边，大概率白忙活。漏掉任何一环，撑破现象就会回来：
立即学习“前端免费学习笔记（深入）”；
- 在
grid-template-columns或grid-template-rows里，把1fr换成minmax(0, 1fr)—— 让轨道本身可收缩 - 在网格直接子元素（
.grid > *）上加min-width: 0—— 解除子项默认的min-width: auto保护 - 若要文字截断，子项还需
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可） - 若要自动换行，子项加
overflow-wrap: break-word;，同样依赖min-width: 0
Safari 兼容性与嵌套布局最容易翻车
Safari 14.1 及更早版本对 minmax(0, 1fr) 解析不稳定，可能让列宽归零或错乱；而嵌套 Grid（比如 grid-item 里又套了一层 display: grid）时，min-width: 0 必须作用在每一层的直接子项上，否则溢出会逐层传导。
真正难的不是写对一行 minmax(0, 1fr)，而是判断“该在哪一层加”——Grid 容器？某条 grid-template-rows？还是某个具体 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
