1fr 默认等价于 minmax(min-content, 1fr)，导致内容最小宽度撑破容器；需同时将轨道设为 minmax(0, 1fr) 并给子项设 min-width: 0 才能真正解决。
fr单位本身不会撑破容器，真正让它“失控”的，是浏览器对内容最小尺寸（min-content）的默认尊重，以及子项默认的 min-width: auto 保护机制。
1fr 默认等价于 minmax(min-content, 1fr)
你写的 1fr 在规范里其实隐式等同于 minmax(min-content, 1fr)。这意味着：这列可以伸展到占 1 份剩余空间，但绝不允许窄于其内容的自然最小宽度——比如一个没空格的 URL、一段 JSON 字段、一张未设 max-width 的图片，它们的 min-content 可能高达 400px。只要这个值大于按比例分得的可用空间，整列就被顶宽，其他列被迫压缩甚至归零。
- 在开发者工具的 Computed 面板里检查子项的
min-width值，如果显示为auto，基本就是它在作祟 -
white-space: nowrap会立刻放大这个问题，但它不是根源，只是暴露了约束缺失 - 仅把容器设成
box-sizing: border-box或加overflow: hidden完全无效——轨道还没被压缩，内容根本没“溢出”，而是让容器被动变宽了
必须同时改两处：轨道定义 + 子项样式
只改一边，90% 的撑破问题照旧。这不是优化建议，是 CSS Grid 弹性行为的硬性依赖：
- 在
grid-template-columns或grid-template-rows中，把1fr替换为minmax(0, 1fr)—— 例如：grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 在网格容器的直接子元素上（如
.grid > .item），显式设置min-width: 0；不能只写.item，否则可能污染非 Grid 上下文 - 如果子项内部还有嵌套的
display: grid或display: flex，那嵌套结构的直接子元素也得加min-width: 0，否则撑开会逐层传导
文字截断或换行仍需额外声明
minmax(0, 1fr) + min-width: 0 解决的是“能不能缩”，不是“缩了之后怎么显示”。要让内容按预期呈现，还得配具体内容控制规则：
- 单行省略号：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+max-width（三者缺一不可） - 自动换行长文本：
overflow-wrap: break-word或word-break: break-all - 图片/iframe 必须额外加：
max-width: 100%+height: auto，否则固有尺寸绕过所有收缩逻辑
Safari 14.1 及更早版本的兼容性陷阱
这些旧版 Safari 把 minmax(0, 1fr) 中的 0 解析为“无约束”，可能导致列宽归零或错乱。这不是 bug，是规范实现差异。稳妥做法是用 @supports 特性检测：
@supports (grid-template-columns: minmax(0, 1fr))) {
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
不支持时，降级为 minmax(min-content, 1fr) + 更强的子项约束（min-width: 0 + width: 100% + box-sizing: border-box）。真正难的从来不是写出 minmax(0, 1fr)，而是在嵌套布局里准确判断“该在哪一层加”——漏掉任何一层的 min-width: 0，撑破就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
