flex子项必须显式设min-width: 0才能覆盖默认auto值，否则flex-shrink不生效；该规则仅对直接子项有效，需配合overflow-wrap、white-space等实现换行或省略，且父容器须有明确宽度约束。
因为 Flex 子项默认 min-width: auto，它不是“没设最小宽”，而是浏览器按内容（比如一长串 URL、无空格英文、未缩放图片）硬算出的隐式下限，直接锁死收缩能力——你写的 min-width: 320px 或 min-width: 0 都可能被绕过或失效。
Flex 直接子项必须显式写 min-width: 0
这是唯一能覆盖 min-width: auto 的合法值。不加它，flex-shrink 根本不启动，哪怕写了 flex: 1 或 overflow: hidden，容器照样被撑开。
- 只对 Flex 容器的**直接子元素**生效，中间嵌套一层
<div> 就失效 <li> <code>min-width: 0px或min-width: 0%在部分浏览器（如旧版 Safari）中不可靠，必须用无单位的min-width: 0 - DevTools 的 Computed 面板里如果
min-width仍显示为auto，说明这步没落实到位 - 长文本换行：需同时加
overflow-wrap: break-word（语义优先）或word-break: break-all（兜底），且父容器要有明确宽度上下文（如width: 100%或max-width: 375px） - 单行省略号：必须四件套同置一个元素：
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis，缺一不可 - 若该元素是行内级（如
<span></span>），还得加display: block或inline-block，否则text-overflow不生效 - Flex 容器自身必须有宽度来源：
width、max-width，或在文档流中继承明确宽度；position: absolute或display: inline-block父容器会导致百分比min-width计算为 0 - 嵌套 Flex 场景（如卡片 → info 区 → 标题文字），每一层实际承载内容的 flex 子项都得单独加
min-width: 0 -
<img>、<iframe></iframe>等替换元素不响应min-width: 0，必须额外配max-width: 100%和height: auto
min-width: 0 只是“解锁”，不是“自动换行”
加了 min-width: 0 后，元素才能开始收缩，但文字是否换行、是否截断，还得靠配套规则驱动。
父容器和嵌套结构常被忽略
即使子项加了 min-width: 0，如果父容器没宽度约束，或内部还有 Flex 嵌套，问题依然存在。
最易漏掉的是：把 min-width: 0 加在父容器上、或和 flex-shrink: 0 共存、或忘了给父容器设 max-width——这三处一错，整套逻辑就卡死在起点。
