min-width: 0 能解决 Flex 子元素溢出，因其覆盖默认的 auto 值，允许子项压缩至 0；需配合 overflow: hidden 和 white-space: nowrap 才使 text-overflow: ellipsis 生效。
Flex 子元素溢出时为什么 min-width: 0 能起作用
默认情况下，Flex 子元素的 min-width 是 auto，浏览器会阻止它收缩到内容最小宽度以下（比如一个长单词或内联块），导致父容器溢出或换行异常。加 min-width: 0 就是告诉浏览器：“允许我缩到 0，别管内容撑多宽”。这不是万能解药，只在你明确希望子项可压缩时才适用。
常见错误现象：text-overflow: ellipsis 不生效、flex: 1 子项不占满剩余空间、横向滚动条意外出现。
- 仅对
display: flex容器的直接子元素有效 - 必须配合
overflow: hidden和white-space: nowrap才能让省略号生效 - 若子元素含
img或iframe，它们默认有固有尺寸，可能仍需额外设max-width: 100%
Flex 容器设了 width 但子项还是溢出？检查这几个地方
容器宽度限制失效，往往不是 CSS 写错了，而是被其他隐式行为覆盖。Flex 布局中，容器的 width 只是“建议值”，子项的 flex-shrink、内容自然尺寸、甚至祖先元素的 min-width 都可能让它撑开。
典型场景：侧边栏 + 主内容区布局，主区设了 flex: 1，但右侧一串长 URL 导致整行变宽。
立即学习“前端免费学习笔记（深入）”；
- 确认父容器没被设
min-width: fit-content或min-width: -webkit-fit-content - 检查子项是否无意中设置了
white-space: normal（允许换行）却没配word-break: break-all -
flex-basis为auto时，会先按内容宽度计算，再缩放；想强制按容器分配，改用flex-basis: 0
flex: 1 和 flex: 1 1 0 在溢出控制上有什么区别
关键在第三个参数 flex-basis。写成 flex: 1 等价于 flex: 1 1 auto，意味着“先看内容多宽，再等比放大/缩小”；而 flex: 1 1 0 表示“初始宽度为 0，全部靠弹性系数分配”，更利于压制内容撑开。
性能影响很小，但逻辑差异明显：前者容易因单个长单词卡住收缩，后者从零开始均分空间，更适合响应式文本区域。
- 用
flex: 1 1 0时，min-width: 0通常可以省略（因为基础宽度已是 0） - 若子项需保留最小可用宽度（比如按钮不能压太扁），就别用
0，改用具体值如flex: 1 1 200px - 注意 Safari 旧版本对
flex-basis: 0解析有偏差，必要时加flex-basis: 0%兜底
用 overflow: hidden 截断前，先确认 Flex 容器没被“撑高”
溢出处理常只盯着横向，但 overflow: hidden 对纵向无效——如果子项高度超限，容器照样会撑高，还可能引发意外交互问题（比如遮挡下方元素）。这时候 min-width: 0 无能为力，得换思路。
使用场景：卡片列表里每张卡含标题+描述+操作按钮，描述文本长度不可控。
- 给容器加
max-height+overflow: hidden，同时确保子项设box-sizing: border-box - 避免在 Flex 子项上直接设
height: 100%，它依赖父容器高度，而 Flex 容器高度常由内容决定 - 真要截断多行文本，
display: -webkit-box仍是目前最稳方案，line-clamp不是所有环境都支持
最易被忽略的一点：Flex 子元素的 margin 在某些浏览器中会参与主轴尺寸计算，导致看似没内容溢出，实则 margin 撑开了容器。遇到诡异留白，先试 margin: 0 排查。
