加 min-width: 0 可解决 flex 子项被长文本撑开问题，但必须作用于直接子元素，并配合 flex-shrink: 1、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及明确宽度（如 max-width: 100%）才生效。
直接加 min-width: 0 能解决大部分 Flex 子项被长文本撑开的问题，但它不是独立生效的“魔法样式”——必须加在正确的元素上，并配合其他三到四个关键声明，否则你改了也看不到效果。
为什么只写 min-width: 0 没反应
这不是 CSS 失效，而是它只做了“解锁收缩权限”这一件事：min-width: 0 覆盖了浏览器默认给 Flex 直接子项设的 min-width: auto（等价于内容最小宽度），但不会自动换行、截断或隐藏溢出。
- 它只对
display: flex容器的**直接子元素**生效；嵌套一层<div> 就失效 <li>开发者工具里务必检查 Computed 面板中该子项的 <code>min-width是否真为0px—— 可能被flex: 1隐含的min-width: auto覆盖 - 如果子项同时写了
flex-shrink: 0，min-width: 0就被绕过，得先删掉或改成flex-shrink: 1 - 替换元素（如
<img>、<input>）需额外处理：max-width: 100%或height: auto -
white-space: nowrap：禁止换行，是text-overflow触发的前提 -
overflow: hidden：隐藏超出部分，否则省略号渲染不出来 -
text-overflow: ellipsis：真正画出省略号 - 还得有明确的宽度来源：
width、max-width或flex-basis（不能是auto或靠flex: 1推导出来的“剩余空间”） - 必须先加
min-width: 0解锁收缩，再加overflow-wrap: break-word（语义更合理）或word-break: break-all（兜底用） - 目标子项仍需有
width或max-width（比如max-width: 100%），否则浏览器无参照，依然撑开 - 移动端特别注意：
flex-direction: column下，min-width: 0不影响垂直伸缩，但文本截断/换行仍在水平方向发生，所以子项自己得设max-width: 100% - 避免全局设
word-break: break-all；应限定在.log-token、.url这类 class 上，防止中文被硬切 - 嵌套 Flex 容器时，每一层需要收缩的子项都得单独加
min-width: 0—— 比如头像 + 文字块的卡片中，“文字块”本身又是 Flex 容器，那它的子项也要加 - 用
flex: 1时，建议显式写成flex: 1 1 0，其中0是flex-basis像素值，比flex: 1 1 0%更稳定，也更容易触发收缩 - 父容器本身必须有宽度约束（
width、max-width或受 viewport 限制），否则“溢出”无参照，整个逻辑失效 - UI 框架组件（如 uni-app 的
<view></view>、Vant 的van-cell）可能自带white-space: nowrap，得手动覆盖掉
要显示省略号，min-width: 0 必须和这三者共存
单行文本末尾显示 … 是个强约束组合，缺一不可，且必须写在同一元素上：
常见错误写法：.title { min-width: 0; flex: 1; text-overflow: ellipsis; } —— 缺 white-space 和 overflow，且 flex: 1 默认不提供明确宽度。
要允许长单词/URL 换行，别只依赖 word-break
word-break: break-all 或 overflow-wrap: break-word 不是开关，它们只在“容器已被允许压缩”的前提下才起作用。而 min-width: auto 会锁死宽度，让换行规则根本没机会执行。
响应式与嵌套场景下容易漏的关键点
越复杂的布局，越容易在某个环节漏掉一个 min-width: 0：
真正难的不是记住 min-width: 0 这行代码，而是每次看到溢出，都要顺藤摸瓜查四件事：父容器有没有宽度约束、子项是不是 Flex 直接子、min-width 是否被覆盖、white-space/overflow/text-overflow 或 overflow-wrap 是否齐备。
