必须同时设置 min-width: 0 和 overflow-wrap: break-word 才能解决 Flex 布局中文字不换行问题；min-width: 0 覆盖默认 min-width: auto 以释放换行条件，overflow-wrap: break-word 触发断行，二者缺一不可。
文字被压缩，不是因为 flex-shrink 本身错了，而是它和文字的默认最小宽度（min-width: auto）叠加后，让换行逻辑彻底失效——必须同时处理收缩行为和最小宽度约束。
为什么 flex-shrink: 0 不能单独解决文字压缩
flex-shrink: 0 确实能阻止元素被比例压缩，但它不改变文字容器的“底线”：浏览器仍认为这个盒子至少得宽到能放下最长单词（比如一串无空格的 base64），于是宁可撑破容器也不换行。结果就是你看到文字被横向拉伸、截断，或整个子项溢出父容器。
- 只加
flex-shrink: 0→ 文字不缩，但也不换行，内容直接溢出 - 只加
overflow-wrap: break-word→ 换行规则没触发，因为容器还没“觉得窄” - 正确组合：
min-width: 0+overflow-wrap: break-word（或word-break: break-word）
min-width: 0 是关键突破口
min-width: 0 的作用不是“让文字变小”，而是告诉 Flex 布局：“这个盒子没有天然最小宽度，该换行就换行”。它覆盖了 min-width: auto 这个隐式保护，真正释放换行条件。
- 必须加在 Flex 子项本身上，不是父容器（
.item { min-width: 0; }✅，.container { min-width: 0; }❌） - 对纯文本容器（如
<div>一段超长无空格URL</div>）最有效 - Safari ≤14.1 下若子项含
white-space: nowrap，min-width: 0可能不生效，此时需改用flex-shrink: 0+overflow: hidden+text-overflow: ellipsis
flex-shrink: 0 什么时候该用、怎么用才安全
它适合那些“尺寸失守即失效”的原子元素，比如图标按钮、头像、短标签。但对普通文字块，乱用反而导致横向滚动或布局断裂。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：
<button><svg></svg> 提交</button>、<span class="tag">VIP</span> - 更稳妥写法：
flex: 0 0 auto（显式禁用伸缩，且比单独flex-shrink: 0不易被flex简写覆盖） - 配合文字截断时，必须加：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 绝对避免：
* { flex-shrink: 0 }—— 它会让所有 Flex 子项拒绝让步，破坏整个弹性逻辑
父容器和文字本身的协同控制
光调子项还不够。父容器若没明确主轴尺寸限制，子项再怎么设 min-width: 0 也可能因自身塌缩而传导挤压；文字若自带换行干扰项，也会绕过你的规则。
- 父容器必须有
width或max-width（例如max-width: 100%或width: 300px），否则子项失去参照基准 - 删掉可能存在的
flex-shrink: 0在文本容器上——它和min-width: 0目标冲突 - 禁用
word-break: break-all（除非你真要暴力断词），优先用overflow-wrap: break-word保持语义完整性 - 检查祖先元素是否设置了
white-space: nowrap或overflow: hidden，它们会覆盖子项的换行策略
最容易被忽略的一点：min-width: 0 和 flex-shrink: 0 解决的是两类问题——前者是“允许收缩以触发换行”，后者是“彻底拒绝收缩以保形”。选错方向，调试半天也白搭。
