min-width: 0是解决flex子项溢出的关键，它覆盖默认的min-width: auto（即内容最小宽度），使flex-shrink能真正生效；必须与white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block同置同一元素才完整生效。
Flex子项默认min-width: auto锁死收缩下限
浏览器给每个Flex子项默认设了min-width: auto，它不是0，也不是你写的width值，而是按内容里最长不可折行片段（比如一长串base64、URL或中文连续字）算出来的“最小内容宽度”。这个值是flex-shrink的硬性下限——哪怕父容器只剩1px宽，子项也宁可溢出，绝不缩得比它小。
所以你写overflow: hidden、white-space: nowrap、text-overflow: ellipsis全白搭，因为文本根本没机会“溢出”，容器早被撑开了。
-
min-width: 0必须加在直接装文本的那个Flex子项上（比如.item > span），不是父容器，也不是嵌套的div - 写成
min-width: 0px或min-width: 0%在旧版Safari/Firefox里可能失效，只用min-width: 0（无单位）最稳 - DevTools里检查computed样式，确认
min-width真实值已变成0px，而非被min-width: fit-content等覆盖
white-space: nowrap和overflow: hidden缺一不可
text-overflow: ellipsis只是个“画省略号”的装饰层，不参与尺寸计算。它只在满足所有前置条件时才生效，漏掉任意一个就卡死：
-
white-space: nowrap必须写在目标元素上，不能靠父级继承；否则文字提前换行，根本没到“单行溢出”那步 -
overflow: hidden只裁剪“已溢出”的内容；如果min-width: auto还在锁着宽度，容器就被撑大，这行CSS等于没执行 -
text-overflow: ellipsis仅对块级或inline-block元素有效；行内元素如span需先加display: block
连续字符串不折行，得靠word-break或overflow-wrap
如果文本是纯连续无空格字符（如xxxxxxxxxxxxxxxxxxxx），white-space: nowrap会让它死扛不换行，min-width: 0+三件套也救不了——因为没有“溢出边界”可裁，它直接把容器拉宽。
这时要分场景选方案：
- 允许折行：加
word-break: break-all（强制任何位置断）或overflow-wrap: break-word（只在无其他断点时断） - 坚持单行截断：确保容器有明确宽度约束（
width/max-width），且min-width: 0已生效，再配齐三件套 - 别用
word-break: break-all处理含语义的英文标题，会破坏可读性；优先用overflow-wrap: break-word
父容器overflow: hidden无效的常见误操作
很多人把overflow: hidden错加在Flex子项上，以为能裁它自己——其实这只是裁子项内部内容，跟它在Flex行里的宽度完全无关。溢出裁剪逻辑只对「容器」起作用。
- 正确做法：给Flex容器加
width或max-width，再加overflow: hidden（但注意，这只会隐藏超出主轴的内容，不触发ellipsis） - 典型翻车：父容器写了
overflow: hidden，但子项仍按自身内容宽度撑开——你看到的是被顶开的盒子，不是被截断的文本 - 移动端iOS Safari默认禁横向滚动，即使设了
overflow-x: auto，也得加-webkit-overflow-scrolling: touch显式开启
height: 100%但祖先没设高度，整个链路就失效了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
