加 min-width: 0 是解决 flex 子项被长文本撑开的最直接手段，但必须与 flex 行为、overflow 控制及宽度约束配合使用；仅设 overflow: hidden 无效，因默认 min-width: auto 锁定最小宽度，导致容器被撑大而省略号不显示。
加 min-width: 0 是解决 Flex 子项被长文本撑开的最直接手段，但它不是孤立生效的——必须和 flex 行为、overflow 控制、宽度约束一起配着用。
为什么只写 overflow: hidden 不管用
常见错误是给子元素加了 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap，结果文本还是跑出盒子。根本原因在于：min-width: auto（Flex 项默认值）会锁死最小宽度，浏览器宁可溢出也不压缩内容。此时 overflow: hidden 只是“藏起来”，但容器本身已被撑大，用户看不到任何省略号。
-
min-width: 0必须写在 flex 直接子项上，不是父容器 - 仅对块级或 inline-block 元素有效；
<input>、<img>等替换元素需另处理 - 开发者工具里检查 computed 样式，确认
min-width真实值是否已变成0px
min-width: 0 要和哪些样式配着写
单独加 min-width: 0 只是打开收缩开关，真正截断或换行还得靠组合：
- 要显示省略号：必须同时有
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，且该元素得有明确宽度（来自父容器width/max-width或自身flex-basis） - 要允许长单词换行：加
overflow-wrap: break-word（推荐）或word-break: break-all，并确保子项有width或max-width - 若子项用了
flex: 1，建议显式写成flex: 1 1 0，避免flex-basis意外设成内容宽
移动端和 column 方向下容易漏的点
横向 Flex（flex-direction: row）下，min-width: 0 主要影响主轴收缩；但在竖排（column）时，文本截断仍发生在行内方向（即水平方向），所以：
- 目标子项必须自己设
max-width: 100%或具体值，否则即使加了min-width: 0，它也会按内容无限延展 - 不要指望
flex: 1在column下自动约束水平宽度——它只管垂直方向伸缩 - 响应式场景慎用固定
min-width（如min-width: 200px），小屏下反而加剧溢出
真正难的不是记住 min-width: 0 这个写法，而是每次遇到溢出都得回头检查：父容器有没有宽度约束、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、文本截断三件套有没有写全——漏掉任意一环，都会让效果消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
