1fr列被长文本撑开是因为轨道默认无最小宽度限制，需用minmax(0, 1fr)显式允许压缩，并配合子项min-width: 0才能使overflow生效。
1fr列被长文本撑开，不是Grid失效，而是轨道默认不设下限——必须用minmax(0, 1fr)显式允许压缩，再配合min-width: 0才能让overflow真正起作用。
为什么1fr会让单元格内容溢出容器
浏览器把1fr理解为“等分剩余空间”，但它不约束轨道最小宽度；遇到无空格长URL、JSON字段或未设white-space的英文单词时，子项默认min-width: auto（即min-content）会强制拉宽整列，其他列被迫收缩甚至消失。你在开发者工具里看到grid-template-columns: 1fr 1fr没变，但Computed中两列宽度严重不等，就是这个原因。
- 只改
grid-template-columns不加min-width: 0，90%的溢出问题照旧 -
white-space: nowrap会让问题立刻暴露，但根源不在它，在轨道和子项的收缩约束缺失 - 嵌套Flex/Grid子项若没同步加
min-width: 0，撑开会逐层传导
怎么正确使用minmax(0, 1fr)
这不是替代1fr的技巧，而是释放其弹性能力的必要声明。写minmax(0, 1fr)等于告诉浏览器：“这列可以缩到0，别管内容多宽”。它在轨道定义层生效，比依赖子项样式更底层、更可靠。
- 三列等分应写：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) - 搭配
repeat()时：repeat(auto-fit, minmax(0, 1fr))才能响应窄屏，auto-fill则会保留空轨道 - 不要混用：
minmax(0, 1fr) auto会导致auto列抢走最小宽度，破坏比例 - Safari 14.1及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测
为什么光加minmax(0, 1fr)还不够
minmax(0, 1fr)只是开了门，子项得自己愿意进门。网格直接子元素（如.grid > .item）必须显式设min-width: 0，否则它仍顶着min-content不缩，轨道收缩失败，overflow: hidden压根没机会裁剪内容。
- 必须写成
.grid > .item { min-width: 0; }，避免影响非Grid上下文 - 图片、
<pre class="brush:php;toolbar:false;"></pre>、<table>等固有尺寸元素尤其容易漏掉这步 <li>若子项内还有嵌套Grid/Flex，其直接子元素也得加<code>min-width: 0 - 要让文字截断，还得在子项上配
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可） - Grid容器被Flex或绝对定位包裹时，
minmax(0, 1fr)比1fr更鲁棒 - 含第三方图表、富文本编辑器或iframe的卡片，你无法控制其内部样式，必须在外层Grid子项上强加
min-width: 0 - iOS Safari对嵌套
overflow支持弱，避免在Grid容器上同时设transform或will-change - 调试时看
getComputedStyle(item).width，如果返回auto但渲染远超预期，大概率是min-content被长哈希值或base64拉高了
移动端和嵌套布局中最容易翻车的地方
真正难的不是写对minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加”：是Grid容器？某条grid-template-rows？还是某个grid-area的直接子元素？漏掉一层，溢出就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
