min-width: 0 是启用 text-overflow: ellipsis 的必要条件，因 Flex 子项默认 min-width: auto 会阻止收缩；它必须加在直接含文本的元素上，并配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及宽度约束才能生效。
min-width: 0 是解决 Flex 子元素文字溢出不截断的必要条件，不是可选项——漏掉它，text-overflow: ellipsis 就永远不生效。
为什么只加 overflow: hidden 和 white-space: nowrap 不行
浏览器根本没触发“溢出”逻辑，因为 Flex 子项默认 min-width: auto，实际表现是“至少要容下最长单词或整段无空格文本”。哪怕你写了 flex: 1，它也死守这个隐式下限，导致容器被撑宽、overflow: hidden 形同虚设。
在 DevTools 的 Computed 面板里检查目标元素，如果 min-width 显示为 auto，基本就能锁定问题根源。
-
min-width: auto是 CSS Flexbox 规范（§4.5）明确定义的「implied minimum size」，不是 bug -
min-width: 0是唯一能显式覆盖它的合法值 - 别用
flex-shrink: 0替代——它会让子项彻底拒绝收缩，反而加剧溢出
min-width: 0 必须加在哪一层
必须加在直接承载文本的元素上，不是 Flex 容器，也不是外层包裹 div。
立即学习“前端免费学习笔记（深入）”；
比如结构是：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.container { display: flex; }
.item { flex: 1; }
.item > span { /* 文字在这里 */ }那 min-width: 0 就得写在 span 上。如果写在 .item 上，span 仍按自身内容宽度锁定，.item 再怎么 flex 也救不回来。
- 若子项内部还有 Flex（如头像 + 文本 + 按钮），内层需要收缩的子项也得单独加
min-width: 0 -
img、input等替换元素需额外处理：max-width: 100%+min-width: 0 -
display: inline-flex或display: table的元素会无视min-width: 0，得换显示类型或重构嵌套
和哪些样式必须配着用
min-width: 0 只是打开收缩开关，真正让省略号出现还得凑齐四件套：
-
white-space: nowrap：必须写在同个元素上，写在父级会导致文字提前折行 -
overflow: hidden：裁剪动作本身，但没min-width: 0就白搭 -
text-overflow: ellipsis：只对块级元素生效，span要先加display: block或inline-block - 明确的宽度约束：来自父容器的
width/max-width，或自身flex-basis；仅靠flex: 1不够稳定
推荐组合写法：
.text-container {
min-width: 0;
flex: 1 1 0; /* 比 flex: 1 更可控，避免 flex-basis: 0% 推导异常 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}移动端和嵌套 Flex 容易翻车的点
横向 Flex（flex-direction: row）下，min-width: 0 控制主轴收缩；但竖排（column）时，文本截断仍发生在行内方向，所以：
- 目标子项必须自己设
max-width: 100%或具体值，否则即使加了min-width: 0，它也会按内容无限延展 -
flex: 1在column下只管垂直伸缩，不管水平宽度 - Safari ≤14.1 对
white-space: nowrap+min-width: 0支持不稳定，可临时加flex-shrink: 0+overflow: hidden保底 - 响应式场景慎用固定
min-width（如min-width: 200px），小屏下反而加剧溢出
真正难的不是记住这行代码，而是每次遇到溢出都得回头确认：父容器有没有宽度约束、子项是不是 Flex 直接子、min-width 是否被其他规则覆盖、四件套有没有写全——漏掉任意一环，效果就消失。
