min-width: 0 用于覆盖 flex 子项默认的 min-width: auto 下限，使 flex-shrink 能真正生效；需与 white-space: nowrap、overflow: hidden、text-overflow: ellipsis（配合 display: block）协同作用于同一元素，且推荐使用 flex: 1 1 0 而非 flex: 1。
min-width: 0 覆盖的是浏览器默认的收缩下限
Flex 子元素默认 min-width: auto，这不是“没设值”，而是浏览器主动计算出的一个最小内容尺寸（minimum content size）——由最长不可折行内容决定，比如一个长 URL https://example.com/very-long-path 或连续无空格英文。这个尺寸是 flex-shrink 的硬性下限：哪怕父容器空间严重不足，子项也宁可撑破容器，绝不缩得比它更小。
min-width: 0 的作用不是“让元素变窄”，而是显式覆盖这个隐式下限，把收缩底线重置为 0。这样 flex-shrink 才真正开始按比例压缩，后续的截断逻辑才有执行基础。
常见错误现象：text-overflow: ellipsis 不生效、横向滚动条意外出现、flex: 1 子项不占满剩余空间——十有八九是 min-width 还卡在 auto 上。
只加 min-width: 0 为什么还是溢出？缺这三样就白搭
min-width: 0 是“解锁收缩”的钥匙，但不等于“自动省略”。它必须和以下三个样式同时作用于**同一个元素**才触发完整截断链：
-
white-space: nowrap：必须写在这里，不能写在父级；否则文字提前折行，连“单行溢出”前提都不满足 -
overflow: hidden：裁剪动作本身，但若没min-width: 0，它对 flex 子项常形同虚设 -
text-overflow: ellipsis：只对块级元素生效，span类行内元素要先加display: block
漏掉任意一个，都会导致：文本被压缩但不省略、裁剪区域错位、或者干脆继续横向溢出。
flex: 1 和 flex: 1 1 0 的区别直接影响 min-width: 0 是否起效
flex: 1 是简写，等价于 flex: 1 1 0%。问题出在 0%：它让浏览器尝试从“0% 容器宽度”推导基础尺寸，但此时内容尚未渲染，flex-basis 计算异常，导致文本容器宽度不稳定，text-overflow 失效概率陡增。
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 必须加在**直接参与弹性分配的子项上**，不是父容器，也不是最外层 wrapper：
- 若父容器是
.list，子项是.item，那min-width: 0必须写在.item上 - 若
.item内部还有 flex 布局（如头像 + 文本 + 按钮），且文本部分需要截断，则那个文本元素（比如.item .title）也得单独加min-width: 0 - 父容器若没设
width或max-width，Flex 容器会按内容自适应，根本不存在“溢出”——此时加再多min-width: 0都没意义 - 移动端调试时，注意检查是否误设了
min-width: -webkit-fit-content或min-width: fit-content，它们会覆盖min-width: 0
最常漏掉的是：忘了给父容器设宽度约束，或者把 overflow: hidden 错加在错误层级上——它必须作用于实际发生溢出的容器，而不是最外层 wrapper。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
