结论：给 grid 容器加 overflow: hidden 本身不会阻止内容撑破容器，真正起效的是 minmax(0, 1fr) + 网格直接子项的 min-width: 0 组合；overflow: hidden 只在这一组合生效后，才对子项内部内容裁剪起作用。
直接说结论：给 Grid 容器加 overflow: hidden 本身不会阻止内容撑破容器，真正起效的是 minmax(0, 1fr) + 网格直接子项的 min-width: 0 组合；overflow: hidden 只在这一组合生效后，才对子项内部内容裁剪起作用。
为什么 overflow: hidden 加在 Grid 容器上基本没用
Grid 容器的 overflow 控制的是“容器边界外的内容是否可见”，但撑破行为发生在轨道（track）计算阶段——浏览器先根据子项的 min-content（比如一个无空格长 URL）拉宽列宽，此时内容根本没溢出容器，而是让容器被动变宽了。所以你加了 overflow: hidden，它连裁剪机会都没有。
- 典型现象：
.grid { overflow: hidden; grid-template-columns: 1fr 1fr; }，一列放长路径，整行还是横向滚动 - 错误归因：以为是
overflow写错了，其实是轨道没被压缩，内容压根没“溢出” - 真正需要裁剪的对象不是 Grid 容器，而是网格项（
.grid > *）自身
minmax(0, 1fr) 必须配 min-width: 0 才能激活 overflow: hidden
minmax(0, 1fr) 告诉轨道“可以缩到 0”，但子项默认有 min-width: auto（等价于 min-width: min-content），它会顶住不缩，导致轨道收缩失败。只有两者配合，overflow: hidden 才有机会裁剪内容。
- 必须同时改两处：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr)+.grid > * { min-width: 0; } - 若子项内还有嵌套 Grid 或 Flex，其直接子元素也得加
min-width: 0，否则溢出会传导 - 图片、
<pre class="brush:php;toolbar:false;"></pre>、<table> 等固有尺寸元素尤其容易漏掉这一步<h3>子项上加 <code>overflow: hidden的具体写法光有轨道收缩还不够，要让文字或内联内容真正被截断或换行，还得在子项上显式控制渲染行为：
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可） - 多行截断：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;（注意 Firefox 需额外处理） - 自动换行：
overflow-wrap: break-word; word-break: break-word;，同样依赖min-width: 0 - 避免误用：
overflow: hidden对display: contents或visibility: collapse的子项完全无效
Safari 兼容性与嵌套布局最容易翻车
Safari 14.1 及更早版本对
minmax(0, 1fr)解析不稳定，可能把0当作“无约束”，导致列宽归零或错乱；而嵌套 Grid 中，min-width: 0必须作用在每一层的直接子项上，漏一层，溢出就传导上去。- 降级方案：
@supports (grid-template-columns: minmax(0, 1fr))) { }包裹新写法，旧版走minmax(min-content, 1fr)+width: 100%+box-sizing: border-box - 嵌套判断关键点：不是“整个 Grid 容器加一次”，而是看哪一层子项实际承载了长文本/图片/第三方组件
- 最常忽略的：富文本编辑器、图表容器、
iframe这些第三方组件内部样式你无法控制，只能靠外层min-width: 0强制接管
真正难的从来不是写对
minmax(0, 1fr)这一行，而是判断“该在哪一层加min-width: 0”——Grid 容器？某条grid-template-rows？还是某个grid-area的直接子元素？漏掉任何一环，撑破现象都会原样回来。 - 单行截断：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
