Flex布局文本溢出需设min-width:0触发收缩，再配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis三件套实现截断，响应式中慎用固定min-width。
在 Flex 布局中，文本溢出常因容器未设宽、子项未限制收缩或未处理换行导致。关键不是单纯加 overflow: hidden，而是结合 min-width、flex-shrink 和文本截断规则协同控制。
明确 flex 项的收缩行为
Flex 子项默认可收缩（flex-shrink: 1），但若内容过长且父容器无宽度约束，浏览器可能不触发收缩，导致溢出。需显式控制：
- 给文本所在 flex 项设置
min-width: 0（或min-width: auto），打破“最小内容宽度”限制，允许其压缩到 0，为overflow生效创造前提 - 避免对文本容器设固定
width或flex-basis过大，否则会阻碍收缩 - 必要时加
flex-shrink: 1显式声明（虽是默认值，但显式更稳妥）
文本截断需三件套配合
仅靠 overflow: hidden 不会自动省略文本，必须搭配：
-
white-space: nowrap：禁止换行 -
overflow: hidden：隐藏溢出部分 -
text-overflow: ellipsis：显示省略号
三者缺一不可，且容器需为块级、有明确宽度（或通过 min-width: 0 在 Flex 中获得压缩能力）。
立即学习“前端免费学习笔记（深入）”；
响应式场景下慎用固定 min-width
min-width 设过大（如 min-width: 200px）可能破坏响应性，在小屏下撑开布局。推荐方式：
- 优先用
min-width: 0解决 flex 收缩问题 - 若需保底宽度，改用
min-width: fit-content或媒体查询分层控制 - 对关键信息项，可考虑用
flex: 0 1 auto（不放大、可收缩、按内容宽）替代硬性min-width
调试技巧：快速定位溢出根源
遇到溢出，按顺序检查：
- 父容器是否设置了
display: flex且未限制总宽度（如width: 100%或max-width） - 文本项是否缺失
min-width: 0—— 这是最常见漏点 - 是否误加了
flex-shrink: 0或white-space: normal干扰截断 - 开发者工具中查看 computed 样式，确认
min-width实际值是否为auto（即未生效）
