Flex子项width:0无效的根本原因是flex-shrink:1和flex-basis:auto的默认行为；需同时设置flex-basis:0、flex-grow:0和min-width:0（即flex:0 0 0;+min-width:0）才能强制宽度为0。
子项 width: 0 被 flex 自动拉伸，根本原因在 flex-shrink 和 flex-basis
Flex 子项设了 width: 0 却没生效，不是 CSS 写错了，而是 Flex 的默认行为在“干预”：只要父容器有剩余空间，flex-shrink: 1（默认值）就会让子项收缩到最小内容宽，而 flex-basis: auto（默认）会优先取内容宽度或 width 值——但仅当它不为 auto 时才真正起效。
-
width在 Flex 容器中只是初始参考，真正控制尺寸的是flex-basis - 如果没显式设置
flex-basis，width只在flex-basis: auto时被读取；一旦内容有宽度（比如文字、图片），width: 0就会被忽略 -
flex-shrink: 1允许压缩，但浏览器不会压到 0px（除非内容可换行或设了min-width: 0）
强制宽度为零的三个关键操作
要让子项真·显示为 0 宽，得同时切断 Flex 的默认干预链：
- 显式设
flex-basis: 0（或0px），覆盖auto，让width彻底失效，以该值为基准伸缩 - 设
flex-grow: 0，防止它从父容器抢空间 - 设
min-width: 0，否则即使flex-basis: 0，浏览器仍会按内容最小宽度（如一个单词的宽度）撑开
完整写法：flex: 0 0 0;（等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 0;）+ min-width: 0;
常见踩坑场景与验证方式
以下情况会让 flex: 0 0 0 看似失效：
立即学习“前端免费学习笔记（深入）”；
- 子项含内联元素（如文字未设
white-space: nowrap），换行后高度还在，但宽度可能“看起来没归零”——用浏览器开发者工具检查 computed width，别只看视觉 - 父容器用了
flex-wrap: wrap，子项换行后宽度受行内剩余空间影响，此时需确认是否真需要单行布局 - 子项有
border或padding，它们不参与flex-basis计算，但会撑出可见宽度——加box-sizing: border-box并检查padding/border是否为 0 - 使用了
fit-content或max-content类的 width 值，这些在 Flex 下行为不稳定，一律换成具体数值或0
兼容性与替代方案
flex: 0 0 0 + min-width: 0 在现代浏览器（Chrome 29+、Firefox 28+、Safari 9+）完全可用。IE11 支持 flex 但对 min-width: 0 处理异常，若必须兼容 IE11，改用 flex: none（等价于 flex: 0 0 auto）再配合 width: 0 和 overflow: hidden 强制裁剪。
真正难的不是写对那几行 CSS，而是意识到：Flex 下的宽度控制权不在 width 手里，而在 flex-basis 和 min-width 的组合手里。漏掉任意一个，就容易卡在“明明写了 0 却不为 0”的死循环里。
