Flex布局文本溢出需设min-width:0触发收缩，再配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis三件套实现截断，响应式中慎用固定min-width。
在 Flex 布局中，文本溢出常因容器未设宽、子项未限制收缩或未处理换行导致。关键不是单纯加 overflow: hidden，而是结合 min-width、flex-shrink 和文本截断规则协同控制。
Flex 子项默认可收缩（flex-shrink: 1），但若内容过长且父容器无宽度约束，浏览器可能不触发收缩，导致溢出。需显式控制：
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: 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 干扰截断min-width 实际值是否为 auto（即未生效）