文本在 flexbox 中不换行的根本原因是 flex 项受 min-width: auto 限制而无法收缩，解决方法 是设置 min-width: 0 以允许压缩，再配合 word-break 或overflow-wrap 实现换行。
当使用 css 弹性盒子（Flexbox）布局时，文本不按预期换行，常表现为文字撑开容器、溢出或强制单行显示，根本原因往往不是 white-space 或 word-break 没设对，而是 flex 项的尺寸收缩行为被默认规则干扰了，尤其在配合 flex-basis: auto 时容易忽略 min-width 的隐式影响。
flex-basis: auto 的真实含义
flex-basis: auto 并非“自动换行”，而是表示：先参考元素自身的主轴尺寸（如 width / height），再交由 flex 算法 调整。若内容是长单词或无空格文本（如 URL、一串英文、中文连续无标点段落），其“固有宽度”可能极大，导致 flex 项拒绝收缩，进而阻止换行。
- 浏览器 会优先尊重内容的最小宽度（即不可分割的最长连续 字符串 长度）
- 即使设置了
word-break: break-word或overflow-wrap: break-word，若父级 flex 项本身不“允许变窄”，样式也无效 -
flex-basis: auto+flex-shrink: 1（默认值）看似可缩，但受min-width: auto限制——这是关键盲区
用 min-width: 0 主动打破最小宽度限制
Flex 容器中每个子项默认的 min-width: auto 会阻止它缩得比内容“最小不可分单元”还小。解决方法 是显式重置为 min-width: 0，给文本换行让出空间：
.flex-item {flex: 1; /* 等价于 flex: 1 1 auto */ min-width: 0; /* 关键：允许压缩到 0，使换行生效 */ word-break: break-word; overflow-wrap: break-word;}-
min-width: 0是最常用且安全的解法，适用于绝大多数文本类 flex 子项 - 不要写
min-width: unset或min-width: initial，它们仍可能回退到auto - 若需保留一定最小宽度（如图标 + 文字组合），可用具体像素值（如
min-width: 40px），但确保小于内容自然宽度
搭配 flex-basis 控制初始占位逻辑
当需要更精细控制初始宽度（比如希望文字区域默认占满剩余空间，但又不僵化），可组合使用：
立即学习 “ 前端免费学习笔记（深入）”；
-
flex: 1 1 0→flex-basis: 0，完全放弃内容宽度参考，彻底交由 flex 分配，此时min-width: 0更必要 -
flex: 1 1 max-content→ 适合想优先保持内容天然宽度，但仍允许收缩换行（需配合min-width: 0） - 避免只写
flex-basis: auto却不设min-width，等于留了个“不换行陷阱”
中文场景特别注意点
中文虽无空格，但现代 浏览器 支持按字折行（word-break: break-all）或按语义断行（word-break: keep-all + overflow-wrap: break-word）。但前提是容器必须能变窄：
- 推荐组合：
word-break: break-word（兼容性好）或overflow-wrap: break-word（语义更准） - 禁用
white-space: nowrap（检查是否从祖先 继承） - 若含英文 / 数字混合长串（如 license key），加
word-break: break-all更保险
基本上就这些。核心就一条：flex 项要换行，先让它能“瘦下来”——min-width: 0 是打开换行权限的钥匙，flex-basis: auto 只是起点，不是终点。
