min-width: 0 是解决 Grid 子项溢出的关键，必须加在直系子元素上以覆盖浏览器默认的 min-width: auto；仅此不够，还需 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 同时作用于同一元素。
因为 min-width: 0 是唯一能覆盖浏览器对 Grid 子项硬编码的 min-width: auto（即 min-content）下限的样式，不加它，后续所有溢出控制逻辑都根本不会触发。
Grid子项默认min-width: auto才是溢出根源
Grid 直接子元素（比如 .grid > .item）默认不是“没设宽度”，而是被浏览器强制赋予 min-width: auto —— 它等价于内容最窄能缩到多少（min-content）。一段无空格 URL 或连续中文，浏览器就按它原始长度算出最小宽度，并死守这个值。哪怕父容器只有 100px，子项也会把自己撑到 800px，overflow: hidden 压根没机会执行。
- 在 DevTools 的 Computed 面板里查
min-width，只要还显示auto，就说明这层没加到位 -
min-width: 0不是“让内容变小”，是松开浏览器的收缩锁死机制 - 只写
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，不加min-width: 0，99% 情况下完全无效
min-width: 0必须加在网格直接子元素上
它只作用于 Grid 容器的**直系子元素**，不能写在容器本身，也不继承。如果子项内部又用了 display: flex 或 display: grid，那内层容器也得单独加。
- 错误写法：
.grid { min-width: 0; }→ 完全无效 - 正确写法：
.grid > .item { min-width: 0; } - 若
.item内有.content { display: flex; }，则.content也要加min-width: 0 - 若最终文本在
.content > span里，这个span同样要加min-width: 0，否则撑开会逐层传导
为什么加了min-width: 0还是溢出？缺这三样就白搭
min-width: 0 只是“解锁收缩”的第一步，它不负责裁剪、不负责省略、不负责换行。要真正看到 text-overflow: ellipsis，必须和以下三个样式同时作用于**同一元素**：
-
white-space: nowrap：必须写在这层，不能靠父级继承；否则文字提前换行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在，容器被撑大，这行等于没执行 -
text-overflow: ellipsis：只对块级元素生效，span类行内元素必须同步加display: block或display: inline-block
Safari 和旧版浏览器里容易失效的几个坑
尤其 iOS 15 及更早 Safari，对 min-width: 0 的解析常有延迟或忽略，嵌套 inline 元素或 display: flex 时更容易翻车：
- 显式加
!important：.item { min-width: 0 !important; } - 只能用无单位的
0：min-width: 0px或min-width: 0%在部分旧浏览器中会被忽略 - 搭配
grid-template-columns: minmax(0, 1fr)更底层可靠，但注意 Safari 14.1 及更早对0解析异常，可用@supports检测 - Vue 的
或 React 的 styled-components 包装器，必须确保样式落在真实 DOM 节点上，不能只作用于组件外壳
真正难的从来不是记住 min-width: 0 这个值，而是在多层嵌套布局中准确判断“该在哪一层加”——是 Grid 子项？内层 Flex 容器？还是最终那个 span？漏掉任意一层，溢出就会从那里顶破整个结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
