Flex子项overflow: hidden不生效，90%是缺min-width: 0；因默认min-width: auto阻止收缩，需在直接子元素上显式设min-width: 0，并配合white-space: nowrap、overflow: hidden及宽度约束才能使text-overflow: ellipsis生效。
Flex子项overflow: hidden不生效，90%是缺min-width: 0
Flex容器的直接子元素默认带有min-width: auto（主轴为row时）或min-height: auto（主轴为column时），它会强制子项至少撑开到内容自然宽度，导致“溢出”根本没发生——overflow: hidden连触发条件都不满足，自然失效。
这不是bug，是Flex规范明确的行为。检查方式很简单：打开Chrome DevTools → Elements → Computed → 搜索min-width，如果值仍是auto，就是它。
- 必须加在参与Flex排列的**直接子元素**上，不能加在父容器或孙子节点
- 写法只能是
min-width: 0（无单位），min-width: 0px或min-width: 0%在Firefox中可能被忽略 - 若该子元素本身也是
display: flex容器，其内部需要截断的文本元素还得再加一遍min-width: 0
text-overflow: ellipsis要生效，三件套必须同级共存
text-overflow: ellipsis不是开关，它只在满足全部硬性条件时才渲染省略号。漏掉任意一个，就白写样式。
-
min-width: 0：解除Flex子项“拒绝收缩”的锁（横向布局） -
white-space: nowrap：必须写在**同一元素上**，不能写在父级；否则文字提前折行，单行溢出不成立 -
overflow: hidden：裁剪动作本身，但若没min-width: 0，它对Flex子项常无效 - 该元素还需有**可计算的宽度约束**：如
max-width: 100%、width: 200px，或来自flex-basis；仅靠flex: 1无法提供确定宽度
图片、内联元素、嵌套Flex容易漏处理
替换元素（如<img>）和内联元素（如<span>）在Flex中同样受min-width: auto锁定，但表现更隐蔽。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须配合max-width: 100%，否则即使加了min-width: 0，图片仍会撑破容器 - 子项内部用了
display: inline-flex或display: table，这些显示类型自带最小尺寸逻辑，优先级高于min-width: 0 - 动态class切换（如
className={`item ${isTruncated ? 'truncate' : ''}`}）中，min-width: 0必须始终存在，不能只放在条件class里 - 用
flex: 0 1 auto或flex: 1时，min-width: 0依然必须显式声明，flex不会自动重置它
父容器没尺寸约束，子项再怎么缩也没用
很多人加了一堆min-width: 0和overflow: hidden，结果还是溢出——根源常在父层。
- Flex容器自身必须有明确的
width、max-width或由外层限制（比如width: 300px或max-width: 100%）；若只写flex: 1且外层无限宽，子项缩到0也看不出效果 - 若父容器是
position: fixed或height: 100vh，但子项设了align-items: stretch，它会被拉伸填满高度，导致纵向溢出不触发滚动 - 不要依赖
display: block自动触发BFC来救场——overflow: hidden本身就能触发BFC，但前提是它得先生效
min-width: 0允许压缩 → overflow: hidden触发裁剪 → text-overflow: ellipsis才有机会渲染。少一环，就白加。 
