min-width: 0是解决flex溢出的关键，它覆盖浏览器默认的min-width: auto（由最长不可折行内容动态计算的硬性收缩下限），使flex-shrink生效；必须与white-space: nowrap、overflow: hidden、text-overflow: ellipsis同作用于同一块级文本元素，并在嵌套flex中逐层设置。
因为 min-width: 0 显式覆盖了浏览器给 Flex 直接子项默认设的 min-width: auto，这是 flex-shrink 能真正生效的唯一前提；不加它，其他所有截断、换行、隐藏样式都只是“在撑开后的容器里假装工作”。
min-width: auto 是什么，为什么它会锁死收缩？
Flex 子项默认不是 min-width: 0，而是 min-width: auto——这不是“没写值”，而是浏览器根据内容中**最长不可折行片段**（比如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 或 https://a.b/c/d/e/f/g/h/i/j/k）动态算出的最小宽度。这个值就是 flex-shrink 的硬性下限：哪怕父容器只剩 1px 宽，子项也宁可横向溢出，绝不缩得比它小。
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，就说明某一层没加到位。
长 URL 或无空格英文单词怎么换行？
即使配齐上面四点，https://example.com/very-long-path 这类字符串仍会撑开——因为浏览器默认不拆分单词。这时 overflow-wrap: break-word 才真正起作用，但它有个前提：容器得先被允许压缩。
所以顺序不能错：
- 先加
min-width: 0解锁收缩权限 - 再加
max-width: 100%或具体值（比如max-width: 300px），给换行提供参照宽度 - 最后加
overflow-wrap: break-word（旧名word-wrap: break-word仍可兼容）
避免和 word-break: break-all 混用——后者会在任意字符间切分，破坏可读性。
真正难的从来不是加一行 min-w-0，而是每次溢出都要确认：它是否真作用在 Flex 容器的**直接子元素**上、有没有被 width: 100% 或 shrink-0 覆盖、父容器是否具备明确的宽高约束、以及文本控制是否凑齐了三件套——漏一个，就白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
