应使用 minmax(0, 1fr) 替代 1fr 并为网格直接子项设置 min-width: 0，以防止内容（如长 url）撑开轨道；嵌套 grid 需在各层对应位置同步应用该规则。
因为 1fr 本身不设收缩下限，浏览器会按子项的 min-content（比如长 URL、未换行英文单词、无约束图片）撑开轨道——你看到的“撑破”，其实是轨道被拉宽，不是内容溢出容器。
为什么 min-width: auto 是罪魁祸首
每个网格直接子元素默认 min-width: auto，等价于其内容最小自然宽度。哪怕你写了 grid-template-columns: 1fr 1fr，只要某个子项含 https://example.com/very/long/path，该列就会被顶到 400px+，另一列可能压缩到 12px。
- 打开 DevTools 的 Computed 面板，检查子项的
min-width值，大概率显示auto -
white-space: nowrap会让问题立刻暴露，但它只是放大器，不是根源 - 仅给 Grid 容器加
overflow: hidden没用——内容根本没“溢出”，是容器自己先变宽了
必须同时改两处：minmax(0, 1fr) + min-width: 0
minmax(0, 1fr) 告诉轨道“可以缩到 0”，但子项得配合才行——min-width: 0 是它进门的许可。
- 在轨道定义中替换：把
1fr改成minmax(0, 1fr)，例如grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 在网格直接子元素上写
.grid > .item { min-width: 0; }，不能只写.item（避免污染） - 如果子项内部用了
display: flex或display: grid，它的直接子元素也得加min-width: 0 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr))检测降级
text-overflow: ellipsis 不生效？缺了这四个条件
它不是开关，是组合锁。漏掉任意一个，省略号就永远不会出现：
-
min-width: 0（解除子项默认保护，最常漏） -
white-space: nowrap（禁止换行） -
overflow: hidden（裁剪视觉溢出） -
width或max-width（提供截断基准，不能是auto）
嵌套 Grid 中 1fr 更危险
外层容器若无显式高度（如 height 或 max-height），会被子内容撑开 → 子 Grid 的 1fr 按这个放大的高度计算 → 反过来又进一步撑高父容器，形成隐式循环放大。
- 打断链路的关键是给中间层加尺寸约束：
max-height: 300px或height: 0; flex: 1;（放在 Flex 父容器里更稳） - 子 Grid 的
grid-template-rows也要用minmax(0, 1fr)，不能只靠外层控制 - 比起嵌套 Grid，外层用 Flex（
flex: 1）+ 内层用 Grid 更适合填满剩余空间场景
真正难的不是写对 minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加 min-width: 0”——漏掉一层，撑开就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
