将1fr替换为minmax(0, 1fr)可防止内容撑开轨道，因1fr默认下限为min-content（如长单词），而minmax(0, 1fr)强制下限为0，使轨道可收缩，配合overflow等样式生效；必用于含长文本、auto-fit/fill及嵌套布局场景。
直接给 grid-template-columns 或 grid-template-rows 里的 1fr 换成 minmax(0, 1fr)，是解决 Grid 项撑开轨道最有效、也最容易被跳过的一步。
为什么 1fr 会让内容撑开列/行
1fr 本身不设下限，它只定义“等分剩余空间”，但浏览器会按子项的 min-content（比如一个长单词、一张未约束的图片）来确定该轨道最小能缩到多窄。一旦内容自然宽度 > 可用空间，轨道就被迫拉宽——不是 overflow 失效，而是轨道根本没被压缩。
-
minmax(0, 1fr)显式把下限设为0，告诉浏览器：“这列/行可以收缩到 0，别管内容多宽” - 这个
0不是像素意义上的“消失”，而是触发 CSS Grid 的“收缩最小值”逻辑，让overflow、text-overflow等样式有机会生效 - 常见错误：只加
overflow: hidden却不改轨道定义 → 白加
minmax(0, 1fr) 在哪些地方必须用
不是所有 1fr 都要硬替换成 minmax(0, 1fr)，但以下场景几乎必改：
- 含文本的列，尤其可能有长链接、代码片段、未换行英文单词：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 网格项内嵌
<pre class="brush:php;toolbar:false;"></pre>、<table> 或第三方组件（如图表容器），且父容器宽度有限 <li>使用 <code>auto-fit/auto-fill时：repeat(auto-fit, minmax(0, 1fr))才能真正响应窄屏，否则列数不变、内容溢出 - Grid 容器被 Flex 或绝对定位包裹，高度/宽度边界不明确时，
minmax(0, 1fr)是比1fr更鲁棒的选择 - 稳妥降级：用
minmax(min-content, 1fr)+ 子项加min-width: 0+width: 100%+box-sizing: border-box - 若内容允许截断，优先在子项上加
overflow: hidden和text-overflow: ellipsis，比依赖轨道收缩更可控 - 真要支持老 Safari，可加特性检测：
@supports (grid-template-columns: minmax(0, 1fr))) { ... }，否则走降级
Safari 兼容性陷阱与降级方案
Safari 14.1 及更早版本对 minmax(0, 1fr) 解析不稳定，可能让列宽归零或错乱。这不是 bug，是规范实现差异——它把 0 当作“无约束”，而非“可收缩下限”。
真正难的不是写对 minmax(0, 1fr)，而是在嵌套布局里判断“该在哪一层加”——Grid 容器？某条 grid-template-rows？还是某个具体 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
