1fr列宽不等或缩至0，是因为子项默认min-width:auto锁定min-content宽度；需双管齐下：轨道用minmax(0,1fr)且子项设min-width:0，再配white-space:nowrap、overflow:hidden、width/max-width才能使text-overflow:ellipsis生效。
fr单位在内容超出时“失效”，不是它坏了，而是它根本没被允许收缩——浏览器默认锁死了子项的最小宽度。
为什么1fr列宽不等甚至缩到0
写 grid-template-columns: 1fr 1fr 后两列宽度差异极大，甚至一列宽800px、一列只有12px，这不是渲染错误。浏览器布局阶段就决定：只要某个子项（比如一个 https://example.com/very/long/path）的 min-content 宽度超过按比例分得的空间，整条轨道就会被拉宽到那个值。1fr 本身等价于 minmax(min-content, 1fr)，它不设下限，只管“分剩余空间”，但前提是轨道能缩得动。
- 检查 DevTools 的 Computed 面板，看网格项的
min-width是否为auto（90%的问题根源） -
white-space: nowrap会彻底固化min-content，但即使没写它，长URL或连续无空格字符串也会触发 - 仅给父容器加
min-width: 0完全无效——必须作用于.grid > .item这一级直接子元素
为什么text-overflow: ellipsis死活不生效
text-overflow: ellipsis 是个“四要素协议”，漏掉任意一个都白搭：
- 子项必须有
min-width: 0（解除默认的min-content锁定） -
white-space: nowrap（禁止换行，让文本形成单行固有宽度） -
overflow: hidden（裁剪溢出部分） -
width或max-width（提供截断基准，不能是auto）
最常被忽略的是第一项：没加 min-width: 0，其余三项全加也没用——浏览器压根没获得“压缩权”，文本连被裁的机会都没有。
怎么真正切断内容撑开链
光靠子项样式不够可靠，尤其在嵌套 Flex、auto-fit 或响应式场景下，得从两层同时下手：
- 轨道定义层：把
1fr换成minmax(0, 1fr)，例如grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 子项样式层：对
.grid > .item显式设min-width: 0 - 若子项内部用了
display: flex或display: grid，它的直接子元素也得同步加min-width: 0，否则撑开会逐层传导 - 图片等替换元素要额外加
max-width: 100%和height: auto，它们同样受min-width: auto影响
嵌套Grid里fr“透支”高度是怎么回事
外层卡片用 grid-template-rows: 1fr auto，里面再套一层 grid-template-rows: 1fr 1fr，结果整个卡片高度失控——这不是fr错了，而是父容器没显式高度约束，被子内容撑开后，子Grid的 1fr 就按这个被撑大的高度去算，形成循环放大。
- 查 DevTools 的 Computed →
height，若为auto或远超预期，就是隐式增长链在起作用 - 打断方法：给中间层加
max-height、用minmax(0, 1fr)替代1fr，或直接改用 Flex 布局处理弹性高度 - 混合使用建议：外层 Flex 控制主结构（
flex: 1更稳），内层 Grid 处理局部二维布局
真正难的不是写对 minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加 min-width: 0”——它必须精准落在网格直接子元素上，且所有可能传导撑开的嵌套子容器，都得同步松绑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
