min-width: 0 是解决 flex 子项溢出的关键，因其覆盖默认的 min-width: auto（按内容最小固有宽度锁定），从而允许收缩；需配合 overflow: hidden、white-space: nowrap、display: block 及父容器明确宽度才生效。
不是 min-width 导致溢出，而是没设 min-width: 0 —— Flex 子项默认的 min-width: auto 在阻止收缩，才让溢出发生。
为什么 min-width: auto 是罪魁祸首
Flex 子项（比如 <div>、<code><p></p>、<input>、<img>）默认 min-width: auto，浏览器会按内容“最小固有宽度”（min-content）来锁定它：一个长 URL、连续无空格英文、或一张大图，都会被当成不可压缩单元。哪怕你写了 width: 100% 或 flex: 1，它也宁可撑破父容器，绝不缩得比这个宽度小。
DevTools 的 Computed 面板里如果看到 min-width: auto，基本就定位到根因了。
-
min-width: auto不是“没设置”，而是显式生效的默认值，优先级高于flex-basis和width -
flex-shrink: 1（默认值）此时完全失效——因为收缩计算在min-width检查之后才执行 - Firefox 对此行为执行更严格；Chrome 有时“悄悄妥协”，但绝不能依赖
min-width: 0 必须加在哪个元素上
必须加在「直接承载内容」的 Flex 子项上，不是父容器，也不是嵌套层级里的任意一层。
- ✅ 正确：
.item > p、.form > input、.card > img - ❌ 无效：
.container（父容器设了没用）、.item（如果它只是个 Flex 容器，内部还有文本） - ⚠️ 嵌套场景下，每一级真正含文本/图片的子项都要单独加，比如
.info > .text和.text > span都可能需要 - 不要写成
min-width: 0px或min-width: 0%—— 只有min-width: 0（无单位）是标准且兼容性最稳的写法
光加 min-width: 0 还不够，缺这三样照样溢出
min-width: 0 只是解锁收缩能力，不等于自动截断或省略。要真正控制溢出，必须和以下样式共存于同一元素：
-
overflow: hidden—— 裁剪动作本身；加错层级（比如只加在外层 wrapper）等于没加 -
white-space: nowrap—— 必须写在这里，否则文字提前折行，失去“单行溢出”前提 -
display: block（或inline-block）——text-overflow: ellipsis只对块级盒生效；<span></span>默认是 inline，不加就无效
另外，父容器必须有明确宽度约束（如 width: 100%、max-width: 400px），否则 Flex 容器自身宽度无限，“溢出”根本无从谈起。
表单控件和图片的特殊处理
input、textarea、img 这类元素除了 min-width: 0，还常需额外干预：
-
input必须同时设box-sizing: border-box，否则默认content-box会让 padding/border 叠加在width: 100%之外 -
img要加max-width: 100%和height: auto，否则固有尺寸会无视 Flex 收缩 - 第三方 UI 库（如 Ant Design、Bootstrap）可能覆盖
box-sizing或设了min-width: fit-content，需检查 Computed 样式确认真实值 - 伪元素（
::before/::after）也要单独声明box-sizing: border-box，否则它们的 padding 会悄悄撑破
最容易被忽略的，其实是父容器没设 width 或 max-width，以及 overflow: hidden 加在了错误层级——这两点让所有样式都白配。
