Flex子项不换行的根本原因是min-width: auto锁死收缩，必须显式设置min-width: 0、max-width: 100%和white-space: normal三者缺一不可，尤其移动端需组合生效。
flex子项不换行，根本原因是min-width: auto锁死了收缩
Flex子项默认min-width: auto，意味着它“宁可撑破容器，也不愿把长单词压扁”。哪怕你写了overflow-wrap: break-word，浏览器也会先尊重这个最小宽度底线，导致属性静默失效。这不是写错了，是Flex的默认抗压缩行为在起作用。
- 必须给含长文本的子元素显式加
min-width: 0（不是min-width: auto，也不是不写） - 如果子项同时设了
flex-shrink: 0，min-width: 0也无效——得先删掉flex-shrink: 0 - iOS Safari ≤15.6 对
flex: 1隐含的min-width: 0支持不稳定，建议始终显式声明
overflow-wrap: break-word 和 word-break: break-all 别混用
overflow-wrap: break-word只在整词放不下时才断，比如https://example.com会整体换行；而word-break: break-all会在任意字母间硬切，把example切成exa…mple，影响复制和屏幕阅读器识别。
- 优先用
overflow-wrap: break-word，配合min-width: 0和max-width: 100% - 仅当内容是纯无意义字符串（如Base64、token）且空间极度受限时，才考虑
word-break: break-all - 绝对不要同时写两个——
word-break: break-all会覆盖overflow-wrap的行为逻辑
flex-wrap: wrap 设了也没用？检查是否被white-space或父容器宽度压制
即使父容器设了flex-wrap: wrap，子项仍可能不换行，常见于：父容器没明确width或max-width、子项继承了white-space: nowrap（按钮、表格单元格、某些UI框架默认值）、或父容器是inline元素没有块级上下文。
- 用开发者工具的Computed面板查
white-space真实值，别只看Styles - 给子元素加
max-width: 100%，为overflow-wrap提供换行依据 - 若父容器是
display: inline-flex或嵌套在span里，需确保其最近的块级祖先已设宽
移动端特别容易失效，关键补丁就三样
在手机上overflow-wrap: break-word单独出现基本等于没写。必须组合生效：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0— 解除Flex子项的最小宽度锁 -
max-width: 100%— 给换行提供明确的边界参考 -
white-space: normal（显式重置） — 清除可能继承的nowrap
漏掉任意一个，在iOS或Android WebView中都可能表现为“看起来写了，但就是不换行”。这不是兼容性bug，是CSS换行机制对上下文的强依赖。
