Flex子项默认min-width: auto锁死收缩，导致内容撑开、overflow失效、换行不触发；必须在直接子元素显式设min-width: 0，并配合width约束、white-space、overflow等属性协同生效。
Flex子项的min-width: auto锁死了收缩能力
浏览器默认给每个Flex直接子元素加了min-width: auto（等价于min-width: fit-content），它的意思是“至少得把最长那个连续字符串完整塞进去”。一串无空格的eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9会被当成不可分割的整体，Flex项宁可把整个卡片拉宽，也不缩自己换行。这不是bug，是规范行为。
此时你加word-break: break-all或overflow-wrap: break-word都无效——因为宽度早已被撑开，断行逻辑压根没触发。
- 用DevTools的Computed面板搜
min-width，确认值真是0px，别靠肉眼猜 - 必须加在Flex容器的**直接子元素**上，比如
.content，而不是.container或.content > span - 如果该子项还写了
flex-shrink: 0，min-width: 0会被忽略，得先删掉 - 旧版Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，一律显式写
overflow-wrap: break-word不是“开启换行”的开关
overflow-wrap: break-word只是“兜底许可”：只有当浏览器确认当前行放不下整个单词时，才允许切开。这个判断依赖三个硬性前提，漏一个就等于没写：
- 父容器有明确宽度约束：
width、max-width或受外层限制（比如max-width: 100%） - 目标元素没被
white-space: nowrap锁死（常见于按钮、表格单元格、UI框架组件） - 元素自身是块级或已通过
display: block/display: inline-block转为可换行上下文
特别注意：它对纯base64、哈希串这类“根本不算单词”的字符串可能仍不触发——因为浏览器觉得“这整串就是一个词”，而break-word只在“词内断”，不负责“字符间断”。
word-break: break-all和overflow-wrap: break-word不是替代关系
它们分工不同，不能只选其一：
-
overflow-wrap: break-word：适合用户可见内容，如长链接、邮箱、带连字符的术语，会优先保斜杠、点等自然断点 -
word-break: break-all：适合技术字段（日志ID、token、API路径），粗暴但可靠，只要超宽就断，无视语义 - 中文为主正文应改用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义；word-break: break-word已废弃，别用
稳妥写法是组合：overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者兜底。移动端X5内核（微信）不支持overflow-wrap: anywhere，别指望用它替代break-all。
表格、移动端、嵌套Flex场景的额外约束
这些上下文会让换行规则更难生效：
- 表格中必须配
table-layout: fixed，且td或th要显式设width（如width: 200px），否则所有换行属性都被忽略 - 移动端iOS 11及更早需双写：
word-wrap: break-word（兼容旧名） +overflow-wrap: break-word - 嵌套Flex场景要逐层加
min-width: 0：如果.desc里还有个display: flex的头像+文字块，那内层容器也得单独加 -
和基本无视overflow-wrap：input得靠width+overflow: hidden截断；textarea需加resize: none+max-width
真正难的不是加一行min-width: 0，而是每次看到撑开，都要顺藤摸瓜查四件事：父容器有没有max-width、子项是不是Flex直接子、min-width是否被其他规则覆盖、flex-shrink: 0是否还开着。漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
