minmax(0, 1fr)能防止轨道被长文本撑开，因其显式将轨道下限设为0，触发Grid收缩逻辑，配合子项min-width: 0才能使overflow等样式生效；漏任一环节均会导致溢出。
minmax(0, 1fr)为什么能压住轨道不被长文本撑开
因为 1fr 本身没有下限约束，浏览器会按子项的 min-content（比如一个无空格的长 URL）来决定该轨道最小能缩到多窄；一旦内容自然宽度 > 分得空间，轨道就被迫拉宽——这不是 overflow 失效，而是轨道根本没被压缩。minmax(0, 1fr) 显式把下限设为 0，触发 Grid 的“收缩最小值”逻辑，让 overflow、text-overflow 等样式有机会生效。
只改 grid-template-columns 还不够，必须同步加 min-width: 0
漏掉这一步，90% 的溢出问题还会回来。原因在于 Grid 子项默认是 min-width: auto（等价于 min-width: min-content），它会阻止自身收缩，哪怕轨道已允许压缩到 0。
- 给网格直接子元素（即
.grid > *）加min-width: 0 - 若子项内部还有嵌套 Grid 或 Flex，那嵌套层的直接子项也得加
min-width: 0 - 图片、
<pre>、<table>等固有尺寸元素尤其需要这一条
minmax(0, 1fr) 在哪些地方必须用
不是所有 1fr 都要硬换，但以下场景几乎必改：
- 含长文本的列，比如日志、URL、代码片段、JSON 字段：用
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 使用
repeat(auto-fit, ...)或repeat(auto-fill, ...)时，不配minmax(0, 1fr)就无法真正响应窄屏 - Grid 容器被 Flex、绝对定位或未设
width的父容器包裹时，minmax(0, 1fr)比1fr更鲁棒 - 子项里嵌了第三方图表组件、富文本编辑器或 iframe，且你无法控制其内部样式
Safari 14.1 及更早版本的兼容性陷阱
这些旧版 Safari 把 0 解析成“无约束”，可能导致列宽归零或错乱。这不是 bug，是规范实现差异。
立即学习“前端免费学习笔记（深入）”；
- 稳妥降级写法：
minmax(min-content, 1fr)+ 子项加min-width: 0+width: 100%+box-sizing: border-box - 特性检测兜底：
@supports (grid-template-columns: minmax(0, 1fr))) { ... } - 最常翻车的是嵌套层级判断——该在 Grid 容器加？某条
grid-template-rows加？还是某个grid-area的直接子元素加？漏一层，溢出就还在那儿
