min-width: 0 覆盖浏览器默认的 min-width: auto 隐式下限，即由最长不可折行内容（如无空格URL）决定的最小内容宽度；它重置收缩底线为0，使 flex-shrink 可生效，并须与 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 同作用于直接文本元素才触发截断。
min-width: 0 覆盖的是浏览器硬编码的收缩下限
Flex 子项默认 min-width: auto，这不是“没写值”，而是浏览器主动计算出的「最小内容宽度」：比如一个无空格 URL https://example.com/very-long-path 或连续英文，会被视为不可折行单元，浏览器直接拒绝压缩——哪怕父容器只剩 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：只对块级元素生效；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;
最容易被忽略的层级和兼容性陷阱
• 必须加在**直接承载文本的 flex 子项**上，比如 .item > span，而不是父容器 .container 或嵌套的 div
• min-width: 0px 或 min-width: 0% 在部分旧版 Safari 或 Firefox 中可能失效，只用 min-width: 0（无单位）最稳
• 父容器本身得有明确宽度约束，比如 width: 100% 或 max-width: 400px；否则 Flex 容器会按内容自适应，根本不存在“溢出”
• 若子项内部还有 flex 布局（如头像 + 文本 + 按钮），内层需收缩的子项也得单独加 min-width: 0
• 移动端调试时，注意是否误设了 min-width: -webkit-fit-content 或 min-width: fit-content，它们会覆盖 min-width: 0
