flex子项overflow: hidden不生效，90%是缺min-width: 0；因默认min-width: auto阻止收缩，需在flex直接子元素上显式设min-width: 0，并配合white-space: nowrap、overflow: hidden及明确宽度约束才能使text-overflow: ellipsis生效。
Flex子项overflow: hidden不生效，90%是缺min-width: 0
不是overflow: hidden写错了，而是 Flex 子项默认带min-width: auto（主轴为 row 时）或min-height: auto（主轴为 column 时），它会锁死最小尺寸不小于内容自然宽/高——浏览器宁可撑破容器，也不压缩内容。此时“溢出”根本没发生，overflow: hidden连触发条件都不满足。
典型现象包括：text-overflow: ellipsis不显示、长 URL 顶破卡片、横向滚动条意外出现、写了white-space: nowrap却依然换行。
检查方式：打开 Chrome DevTools → Elements → Computed → 搜索min-width，若值仍是auto，基本就是它。
min-width: 0必须加在哪个元素上？
只对display: flex的**直接子元素**生效，且必须加在你希望截断的那个元素上——不是父容器，也不是孙子节点。
- ✅ 正确：
.item { min-width: 0; overflow: hidden; }（.item是.flex-container的直系子元素） - ❌ 错误：把
min-width: 0加在.flex-container上 - ❌ 错误：加在
.item > span上，而span不是 Flex 直接子项 - ⚠️ 注意：
min-width: 0px或min-width: 0%在 Firefox 中可能被忽略，必须用无单位的min-width: 0
min-width: 0要配齐哪几个样式才真正起效？
min-width: 0只是“打开收缩开关”，单靠它不能让text-overflow: ellipsis出现。以下四者需同级共存于同一块级元素：
-
min-width: 0（解除 Flex 子项拒绝收缩的锁定） -
white-space: nowrap（必须写在同一元素上；写在父级无效） -
overflow: hidden（裁剪动作本身） - 明确宽度约束：
max-width: 100%、width: 200px，或由flex-basis提供；仅靠flex: 1不行，因为其宽度仍是auto
如果该子元素本身也是display: flex容器，其内部需要截断的文本元素还得再加一遍min-width: 0。
图片、内联元素和嵌套 Flex 容易漏哪些处理？
替换元素（如<img>）和内联元素（如<span></span>）同样受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 里 - 父容器自身必须有明确宽度约束（如
width、max-width或外层限制），否则子项再怎么缩也没意义
最常被忽略的是：父容器没尺寸约束，或子项内部是嵌套 Flex 却忘了二次加min-width: 0——这两处一漏，前面所有样式都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
