minmax(0, 1fr)本身不防溢出，必须配合网格直接子项的min-width: 0才能生效；仅设前者而子项仍保持默认min-width: auto（即min-content），轨道无法压缩，内容照常撑开容器。
直接说结论：minmax(0, 1fr) 本身不防溢出，它只是打开轨道可压缩的“开关”；真正起效必须配合网格直接子项的 min-width: 0，否则内容照撑。
为什么只写 minmax(0, 1fr) 还是会溢出
浏览器对 1fr 的默认解释等价于 minmax(auto, 1fr)，其中 auto 就是 min-content —— 也就是长 URL、连续英文、<pre class="brush:php;toolbar:false;"></pre> 块这类无换行内容的原始宽度。你写了 minmax(0, 1fr)，只是告诉轨道“可以缩到 0”，但子项自己还顶着 min-width: auto 不放，轨道根本缩不动。
常见错误现象：
-
.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }，但容器仍横向滚动 - 开发者工具里看到两列计算宽度严重不均，比如一列 5px、另一列 800px
- 加了
overflow: hidden在容器上，完全没反应
minmax(0, 1fr) 必须和 min-width: 0 成对出现
这是硬性组合，漏掉任一就失效。关键点在于：这个 min-width: 0 必须加在网格的**直接子元素**上，不是加在容器，也不是加在孙子节点。
- 正确写法：
.grid > *或.grid > .item { min-width: 0; } - 图片、
<table>、<code><pre class="brush:php;toolbar:false;"></pre>等固有尺寸元素的父容器（即网格项）也得加，不能只加在img上 - 如果网格项内部用了
display: flex或display: grid，它的直接子元素也得加min-width: 0，否则撑开会传导 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr))做特性检测 - 单行省略：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可，且该元素要有明确宽度） - 多行省略：用
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;，Firefox 需额外处理 - 自动换行（推荐用于普通文本）：
overflow-wrap: break-word; - 暴力折行（适合哈希、base64）：
word-break: break-all;，注意 iOS 15 前 Safari 有 bug - 图片必须加
max-width: 100%; height: auto;，否则min-width: 0对它无效 -
auto-fit：空轨道直接消失，剩余列拉伸填满，视觉干净，日常首选 -
auto-fill：保留空轨道位置，适合需要 JS 监听列数变化的场景 - 别混用：
minmax(0, 1fr) auto会让auto列抢走最小宽度，破坏比例 - 小屏下慎用大最小值，比如
minmax(400px, 1fr)在手机上必然溢出，此时应降级为minmax(0, 1fr)或改用媒体查询
搭配什么样式才能让内容真正被截断或换行
min-width: 0 只解决“能不能缩”，不决定“缩了之后怎么显示”。要让文字不撑开，还得按需配：
auto-fit 和 minmax() 一起用才真正响应式
固定写 repeat(3, minmax(0, 1fr)) 没用，列数还是死的。要用 repeat(auto-fit, minmax(0, 1fr)) 才能让 Grid 根据容器宽度自动增减列数，并把空轨道收缩掉。
最常被忽略的是：嵌套层级越深，min-width: 0 越容易漏加。不是“写一次全局生效”，而是每一层 Grid/Flex 的直接子项都得单独设——哪怕用了第三方组件库，也得手动覆盖其包裹节点的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
