为何CSS Grid中的fr单位在处理长文字内容时会溢出

fr列被长文本撑开的根本原因是1fr不设下限且子项默认min-width: auto，必须同时设置minmax(0, 1fr)和子项min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及max-width才能使省略号生效。

fr单位本身不溢出，是它默认不设下限 + 子项默认min-width: auto共同导致的强制撑开。

fr列被长文本顶宽的根本机制

浏览器把1fr理解为“等分剩余空间”，但它不参与内容最小尺寸计算。当一列里塞进无空格长URL、JSON字段或连续英文单词时，该列的直接子元素（比如.grid-item）默认min-width: auto（≈内容最小宽度），会拒绝压缩——哪怕轨道只剩1px，它也要硬占200px，结果整列被拉宽，其他列被挤塌。

你在开发者工具里看到grid-template-columns: 1fr 1fr没变，但Computed宽度严重不等，就是这个原因。

• fr只管“怎么分剩余空间”，不管“能不能缩”
• 子项不设min-width: 0，等于给它穿了防缩甲
• 嵌套Flex/Grid子项若也没加min-width: 0，撑开会逐层传导

为什么text-overflow: ellipsis写了也不生效

不是text-overflow: ellipsis失效，是它根本没触发条件——它只在同时满足以下四点时才工作：

立即学习“前端免费学习笔记（深入）”；

• min-width: 0（解除子项最小宽度保护）
• white-space: nowrap（禁止换行）
• overflow: hidden（隐藏溢出部分）
• max-width或width（提供截断依据，不能是auto）

缺一不可，且必须全部作用于同一个元素（即.grid > .item）。只写后三项，min-width: auto仍在挡路，所有样式都被忽略。

minmax(0, 1fr)不是替代fr，而是释放它的弹性

写minmax(0, 1fr)不是为了“换个写法”，是显式告诉浏览器：“这列可以缩到0，别管内容多宽”。它在轨道定义层生效，比依赖子项样式更底层、更可靠。

• 三列等分应写：grid-template-columns: repeat(3, minmax(0, 1fr))
• 响应式列数推荐：grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)))
• 别混用：minmax(0, 1fr) auto会导致auto列抢走最小宽度，破坏比例
• Safari 14.1及更早对0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测

最容易被忽略的实操细节

真正难的不是写对minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加min-width: 0”：是Grid容器？某条grid-template-rows？还是某个grid-area的直接子元素？

图片、<pre>、<table>等固有尺寸元素尤其容易漏掉这步；如果子项内还有嵌套Grid/Flex，其直接子元素也得加min-width: 0。缓存和Computed值未刷新也会让你误判——真遇到不生效，先检查Computed里min-width是否确实是0，而不是auto或继承来的其他值。