Flex子项文字截断重叠的根本原因是min-width: auto阻止收缩，须设min-width: 0或min-height: 0解锁压缩，再配合overflow-wrap: break-word换行及overflow或line-clamp控制显示边界。
Flex容器里文字被截断或重叠，min-width 和 min-height 不生效？
Flex 会强行压缩子项，尤其当内容区有长单词、英文连续字符串或未设置换行策略时，min-width 看似写了，实际被忽略。根本原因是 Flex 项默认的 min-width: auto（不是 0），它会阻止收缩到内容最小尺寸以下——但这个“内容最小尺寸”可能远超你预期，比如一个没空格的 50 字符 URL。
- 必须显式设
min-width: 0或min-height: 0才能解锁收缩能力，这是 Flex 子项的隐藏开关 - 只对直接子元素生效，嵌套 Flex 容器要逐层处理
- 配合
word-break: break-word或overflow-wrap: break-word才能真正防重叠，单靠min-width: 0只解决“能缩”，不解决“缩了怎么换行”
white-space 和 overflow-wrap 怎么选？
它们解决的是不同层面的问题：white-space 控制空格和换行符是否生效，overflow-wrap 决定是否在长单词内部断行。很多人一上来就加 white-space: nowrap，结果反而让文字更易溢出。
- 默认值
white-space: normal允许空格处换行，但对无空格长串无效 - 需要断单词时，优先用
overflow-wrap: break-word（现代标准）或兼容写法word-wrap: break-word -
word-break: break-all会强制在任意字符间断，中文场景下可能把“你好世界”切成“你好世/界”，慎用
Flex方向为 column 时文字重叠更隐蔽？
横向 Flex（row）下宽度问题一眼可见；纵向 Flex（column）下高度受限时，文字不会“溢出容器”，而是直接重叠——因为多行文本的行高叠加后超出父容器，又没设 overflow，视觉上就是字压字。
- 检查父容器是否设置了固定
height或max-height，且未配overflow: hidden或auto - 子项需同时设
min-height: 0（对应纵向压缩）+overflow: hidden+display: -webkit-box（如需多行省略） - 纯文本块建议用
line-clamp替代手动计算行高，但注意它依赖display: -webkit-box和overflow: hidden
为什么加了 flex-shrink: 1 还是不缩？
flex-shrink 只控制“缩多少”，不控制“能不能缩”。如果子项本身有刚性尺寸（比如图片、input、设置了 width 的 div），或者其内容最小尺寸（min-content）过大，flex-shrink 就没机会起作用。
立即学习“前端免费学习笔记（深入）”；
- 先确认是否已设
min-width: 0（row）或min-height: 0（column） - 检查是否有隐式最小尺寸来源：图片无
max-width: 100%、pre标签默认不换行、字体过大会撑高行框 - 用浏览器开发者工具的 Layout 面板看“Min-Width”计算值，比猜更准
min-width/min-height: 0 解锁收缩权限，overflow-wrap 提供断行能力，overflow 或 line-clamp 收口显示边界。少一个，都可能在某个屏幕尺寸或数据输入下突然重叠。 
