min-width: 0是解决Flex溢出的第一步，因其覆盖默认min-width: auto隐式限制，使flex-shrink能生效；必须与white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block同置同一元素，并配合父容器width/max-width约束才完整生效。
为什么min-width: 0是解决Flex溢出的第一步
Flex子项默认min-width: auto，浏览器会死守内容最小宽度（比如一个长URL或连续无空格英文），宁可撑破容器也不压缩。加min-width: 0不是让内容变小，而是显式解除这个隐式限制，允许flex-shrink真正起效。DevTools里看到computed值仍是auto，基本就锁定问题根源了。
text-overflow: ellipsis在Flex里不生效的硬性条件
它只对块级、单行、有明确宽度约束且被裁剪的元素起作用。漏掉任意一条都会失效：
-
white-space: nowrap必须写在含文本的子元素上，不能写父容器——否则文字提前折行，根本没机会溢出 -
overflow: hidden必须作用于同一元素，且该元素得是块级；span类行内元素要先加display: block -
min-width: 0必须存在，否则flex-shrink会被内容宽度卡住，裁剪逻辑压根不触发 - 父容器要有
width或max-width约束，否则Flex容器按内容自适应，不存在“剩余空间”供收缩
flex: 1和flex: 1 1 0对溢出控制的实际差别
两者都常用，但关键在第三个参数flex-basis：
-
flex: 1等价于flex: 1 1 0%，0%是相对父容器计算的百分比，渲染前无法确定基准，容易导致截断不稳定 -
flex: 1 1 0中的0是像素值，明确表示“初始宽度为0px”，后续所有伸缩都基于这个确定起点，配合min-width: 0后文本容器宽度才可控 - Safari旧版本对
flex-basis: 0支持不稳，建议补flex-basis: 0%兜底，或保留min-width: 0
容易被忽略的嵌套与兼容性坑
溢出问题常藏在深层结构里：
立即学习“前端免费学习笔记（深入）”；
- 子项内部还有Flex容器（如头像+文本+按钮），内层需收缩的子项也得单独加
min-width: 0，外层加了没用 -
<img alt="如何处理CSS Flex布局中子元素溢出的问题？" >或<iframe></iframe>有固有尺寸，必须额外加max-width: 100%和height: auto - 子项用了
padding但没设box-sizing: border-box，padding会叠加在flex-basis之外，直接导致总宽超限 - 移动端Safari可能误读
min-width: -webkit-fit-content，覆盖掉min-width: 0，检查computed样式确认
min-width: 0本身，而是它和overflow: hidden、white-space: nowrap、text-overflow: ellipsis这四者是否落在同一元素上，以及父容器有没有真正的宽度约束。 
