minmax(0, 1fr)能压住长文本撑开列，是因为它将轨道最小宽度从默认min-content强制设为0，使轨道可压缩；但必须搭配子项min-width: 0才能生效，否则子项仍顶住内容宽度导致轨道无法收缩。
minmax(0, 1fr) 为什么能压住长文本撑开列
不是因为“让列变小”，而是它把轨道最小宽度从默认的 min-content（比如一个无空格 URL 的原始宽度）强行设为 0，从而允许浏览器压缩轨道——否则 1fr 只是“等分剩余空间”，但剩余空间本身已被内容拉宽了。
常见错误现象：grid-template-columns: 1fr 1fr，一列放 <pre>https://very-long-url-with-no-slash-or-dash</pre>，整行横向滚动，开发者工具里看到两列宽度严重不等。
-
1fr本身不设下限，minmax(0, 1fr)才是显式声明“这列可以缩到 0” - 必须搭配子项的
min-width: 0，否则子项仍顶着min-content不缩，轨道压不下去 - 写法要完整：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)，不能只改其中一列
grid 直接子项必须加 min-width: 0
minmax(0, 1fr) 开了门，但子项得自己进门。默认 min-width: auto（等价于 min-content）会死守内容宽度，导致轨道收缩失败——此时 overflow: hidden 压根没机会生效。
典型漏掉场景：子项是 <div> 包着 <img> 或 <table>，或者用了 display: flex 的嵌套容器。
立即学习“前端免费学习笔记（深入）”；
- 必须写成
.grid > .item { min-width: 0; }，避免影响非 Grid 上下文 - 若子项内部还有 Grid/Flex，它的直接子元素也得加
min-width: 0 -
<img>、<pre>、<table>这类固有尺寸元素尤其容易漏，它们默认不响应min-width: 0，需额外加max-width: 100%或width: 100%
overflow: hidden 在哪一层加才真正起作用
overflow: hidden 加在 Grid 容器上基本无效——它裁剪的是容器边界外的内容，但撑破行为发生在轨道计算阶段，内容根本没“溢出”，而是让容器被动变宽了。
真正需要裁剪的是网格项自身，且必须满足两个前提：轨道已收缩（minmax(0, 1fr)）+ 子项可压缩（min-width: 0）。
- 文字单行截断：子项上同时加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 文字自动换行：子项上加
overflow-wrap: break-word+word-break: break-word，同样依赖min-width: 0 -
display: contents或visibility: collapse的子项上加overflow: hidden完全无效
Safari 14.1 及更早版本的兼容性坑
Safari 14.1 及更早对 minmax(0, 1fr) 解析不稳定，可能让列宽归零或错乱——它把 0 当作“无约束”，而非“可收缩下限”。这不是 bug，是规范实现差异。
稳妥降级方案不是放弃 minmax，而是换参数组合：
- 用
minmax(min-content, 1fr)+ 子项min-width: 0+width: 100%+box-sizing: border-box - 加特性检测：
@supports (grid-template-columns: minmax(0, 1fr))) { ... }，否则走降级 - 若内容允许截断，优先在子项上加
overflow: hidden和text-overflow: ellipsis，比依赖轨道收缩更可控
真正难的不是写对 minmax(0, 1fr)，而是在嵌套布局里判断“该在哪一层加”——Grid 容器？某条 grid-template-rows？还是某个 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
