overflow: hidden加在grid容器上无效，因撑破源于轨道被min-content拉宽而非内容溢出；必须同时将1fr替换为minmax(0, 1fr)并在直接子项设min-width: 0，才能使截断生效。
为什么 overflow: hidden 加在 grid 容器上没用
因为 Grid 容器默认不创建 BFC，且子元素的 min-width: auto（即 min-content）会强制拉宽轨道——内容根本没“溢出”，而是让容器被动变宽了。overflow: hidden 只裁剪超出边界的像素，不干预轨道计算逻辑。你看到横向滚动条、列宽严重不均、text-overflow: ellipsis 失效，基本都是这个原因。
必须同时改的两处：轨道定义 + 子项样式
漏掉任意一环，撑开问题照旧：
- 在
grid-template-columns或grid-template-rows中，把需要弹性收缩的1fr替换为minmax(0, 1fr)（例如：grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 200px） - 对网格容器的**直接子元素**（即
.grid > *）统一加min-width: 0（水平方向）或min-height: 0（垂直方向） - 若子项内部还有嵌套
display: grid或display: flex，它的直接子元素也得加min-width: 0，否则撑出会逐层传导
图片/iframe 撑开网格怎么办
替换元素（如 <img>、<iframe>）默认拒绝压缩，仅靠 min-width: 0 不够：
-
min-width: 0必须加在图片的**父网格项**上，不是加在<img>自身 - 图片自身要设
width: 100%+height: auto（保比例）或width: 100%+height: 100%+object-fit: cover（填满） - 绝对定位方案也有效：给网格项加
position: relative，图片加position: absolute; top: 0; left: 0; width: 100%; height: 100%，使其脱离文档流 - 别依赖
max-width: 100%单独约束——如果轨道已被撑大，100%就是错的基准
Safari 兼容性与嵌套布局最容易翻车
minmax(0, 1fr) 在 Safari 14.1 及更早版本中解析不稳定，可能让列宽归零或错乱；而嵌套 Grid/Flex 时，min-width: 0 必须作用在每一层的**直接子元素**上：
立即学习“前端免费学习笔记（深入）”；
- 稳妥降级写法：
minmax(min-content, 1fr)+ 子项min-width: 0+width: 100%+box-sizing: border-box - 用
@supports (grid-template-columns: minmax(0, 1fr)))做特性检测，老 Safari 走降级路径 - 框架组件（如 Ant Design Card）通常不带
min-width: 0，得手动覆盖；Vue scoped 样式要用:deep(.grid-item)穿透 - 真正难的不是写对一行
minmax(0, 1fr)，而是判断“该在哪一层加”——Grid 容器？某条grid-template-rows？还是某个具体grid-area的直接子元素？漏掉一层，溢出就还在那儿
