min-width: 0 用于覆盖浏览器默认的 min-width: auto 下限，使 flex-shrink 生效；需与 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及 display: block 同时作用于同一文本元素才触发完整截断。
min-width: 0 覆盖的是浏览器硬编码的收缩下限
Flex 子项默认不是 min-width: 0，而是 min-width: auto——这不是“没设值”，而是浏览器根据内容中**最长不可折行片段**（比如一串无空格 URL、base64 或连续中文）主动算出的最小宽度。这个值是 flex-shrink 的硬性下限：哪怕父容器只剩 1px 宽，子项也宁可横向溢出，绝不缩得比它小。
min-width: 0 的作用不是“压扁元素”，而是显式覆盖这个隐式下限，把收缩底线重置为 0。只有这时，flex-shrink 才真正开始工作，后续的截断逻辑才有执行基础。
DevTools 中检查 computed 样式，如果 min-width 还显示 auto，基本就锁定问题根源了。
只加 min-width: 0 为什么还是溢出？缺这三样就白搭
min-width: 0 是“解锁收缩”的钥匙，但不是“自动省略”的开关。它必须和以下三个样式同时作用于**同一元素**才触发完整截断链：
-
white-space: nowrap：必须写在这里，不能靠父级继承；否则文字提前换行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在锁着宽度，容器被撑大，这行 CSS 就等于没执行 -
text-overflow: ellipsis：仅对块级或inline-block元素生效；span这类行内元素需先加display: block
漏掉任意一个，都会导致：文本被压缩但不省略、裁剪区域错位、或者干脆继续横向溢出。
嵌套 Flex 容器里最容易漏掉哪一层？
每级 display: flex 的直接子项都受 min-width: auto 锁定，min-width: 0 不会穿透层级。例如：
-
.card是外层 Flex 容器 → 给它加min-width: 0只影响它自己在 Grid/父容器中的压缩 -
.card > .info是内层 Flex 容器 → 它的子项（如.info > .title）仍受默认min-width: auto锁定 -
.title里还有span包文本 → 若没给span加min-width: 0，浏览器仍按最长 URL 算最小宽
DevTools 里检查 computed min-width，只要还显示 auto，就说明某一层没加到位。重点关注三类节点：.grid-cell（最外层 Flex 容器）、.grid-cell > .content（需伸缩的直接子项）、.content > span（最终承载文本的叶子节点）。
flex: 1 和 flex: 1 1 0 对 min-width: 0 的配合效果不同
flex: 1 等价于 flex: 1 1 0%，其中 0% 是相对父容器宽度计算的百分比，而渲染前父宽未定，导致 flex-basis 推导异常，min-width: 0 可能无法稳定生效。
推荐用 flex: 1 1 0，其中 0 是像素值，明确表示“初始宽度为 0px”。配合 min-width: 0 后，文本容器宽度才可预期。
错误写法：flex: 1; min-width: 0; → 仍可能失效（因 flex-basis 是 0%）
推荐写法：flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
最常被忽略的点是：你写的 min-width: 0 是否真的落在了「直接承载文本的那个元素」上，而不是它的父容器；以及是否所有嵌套层级都已覆盖——尤其当结构里混着 span、img、多层 flex 时，漏一层就前功尽弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
