必须给flex子项加min-width: 0才能使word-break或overflow-wrap生效，否则min-width: auto会锁死收缩能力导致断行失效；再配合white-space: normal和overflow-wrap: break-word。
flex子项里中文/长英文不换行，光加word-break没用
直接加word-break: break-word或overflow-wrap: break-word往往无效——不是属性写错了，而是flex子项被min-width: auto锁死了收缩能力。浏览器会优先保证“内容最小不可分单元”的宽度（比如一整段中文、一个超长URL），哪怕父容器再窄，它也不肯压缩，换行自然失效。
必须同步加min-width: 0，主动解除这个隐式限制。这是最关键的一步，缺了它，所有断行策略都形同虚设。
-
min-width: 0是安全解法；别用min-width: unset或min-width: initial，它们仍可能回退到auto - 若需保留最小占位（如带图标的文字项），可用具体像素值，例如
min-width: 40px，但要确保小于内容自然宽度 - 搭配
white-space: normal（尤其当父级继承了nowrap时）
为什么flex-basis: auto会让文本撑开容器
flex-basis: auto的真实含义是“先看元素自身主轴尺寸（比如width或内容固有宽度），再交由flex算法调整”。对无空格的中文段落或长URL来说，“固有宽度”极大，flex项就拒绝收缩，哪怕flex-shrink: 1开着也没用。
这时候flex-basis: auto + flex-shrink: 1看似可缩，实则被min-width: auto卡住。解决路径很明确：显式写min-width: 0，再配overflow-wrap: break-word。
- 不要依赖
flex: 1这类简写，它会覆盖width且默认flex-basis: 0%，反而让换行失去基准 - 想稳控初始宽度，改用
flex: 0 1 200px（不放大、可缩小、基础宽200px） - 移动端常用
flex-basis: 100%+min-width: 240px实现单列回退
IE11和旧版Safari里word-break行为异常怎么办
IE11对flex-basis解析有bug，可能导致换行错位；旧版Safari（min-width，让min-width: 0失效。这时不能只靠word-break兜底。
兼容方案要分层处理：
- 对IE11，避免用
flex-basis控制换行点，改用width+flex: 0 1 auto - 旧版Safari需额外加
align-items: flex-start，防止子项被拉伸导致高度不一致 - 同时声明
word-wrap: break-word（旧名）和overflow-wrap: break-word（标准名），确保兼容性
文本换行生效但父容器被撑开，怎么收住
即使word-break和min-width: 0都加了，父容器仍可能被撑高或撑宽——常见于子项含图片、input等替换元素，或未控高。
关键检查点：
- 替换元素（如
<img>、<input>）必须加max-width: 100%，否则无视flex收缩规则 - 若要限制父容器高度并截断文本，得配合
height+overflow: hidden+text-overflow: ellipsis，但注意ellipsis要求white-space: nowrap，和换行冲突，二者不可共存 - 横向溢出时，父容器需明确
width或max-width，再加overflow-x: auto，否则Flex会强行伸展容器
最易忽略的是：flex子项的换行逻辑，本质上是尺寸约束、文本策略、浏览器兼容三者叠加的结果。少任何一个环节，都可能在某个环境里突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
