flex子项宽度由flex-basis决定，width仅作参考；min-width: auto会锁定最小尺寸导致收缩失效，需显式设min-width: 0才能正常收缩。
因为 width 在 flex 子项中只是“参考值”，真正起效的是 flex-basis；而默认的 min-width: auto 会锁死最小尺寸，让宽度收缩失效——哪怕你写了 width: 0 或 max-width: 100px，内容照样能撑开。
flex 子项的 width 不是最终宽度控制开关
在 display: flex 容器里，子元素的 width 属性不会直接决定渲染宽度。浏览器优先读取 flex-basis（它默认等于 width，但可被覆盖），再结合 flex-grow 和 flex-shrink 计算最终尺寸。
- 没显式设
flex-basis时，浏览器按内容固有宽度（比如长 URL、未折行文本、<img alt="为什么CSS3弹性盒中设置了width后仍会被内容无限撑大？" >原始尺寸）推导，width被忽略 - 写了
flex: 1等价于flex: 1 1 0%，但0%是相对父容器 content 区计算的，若父容器无明确宽度，结果仍是“按内容撑” -
flex-basis: auto（默认）会回退到width值，但如果width是auto或未声明，就直接取内容宽度
min-width: auto 是撑破的根源，不是 bug 是设计
Flex 子项默认带 min-width: auto（主轴为 row 时）或 min-height: auto（column 时）。这个 “auto” 不是“无限制”，而是由内容推算出一个不可压缩的最小尺寸——一张 200px 宽的图片、一段 white-space: nowrap 的长链接，都会成为下限。
- DevTools 里检查 computed
min-width，若显示auto，基本就是它在作祟 -
min-width: 0必须加在**那个要收缩的子元素上**，不是父容器，也不是嵌套里的孙子节点 - 如果子项内部还有 flex 容器（如头像+文字块），仅在外层加
min-width: 0不够，内层含文本的容器也得加
text-overflow: ellipsis 失效？先看这四个条件是否全满足
text-overflow: ellipsis 不是“一设就灵”，它依赖四个硬性前提同时成立，缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 目标元素必须是块级盒：
display: block或inline-block（inline不生效） -
white-space: nowrap：强制单行，否则文字提前换行，“溢出”根本没发生 -
overflow: hidden（或overflow-x: hidden）：裁剪动作本身，但没min-width: 0时子项压根不缩，overflow就无内容可裁 - 明确宽度约束：不能只靠
flex: 1，推荐用flex: 1 1 0（第三个参数是像素值，起点确定），避免flex-basis: auto推导异常
图片、表格、长单词这些“静默破坏者”怎么防
即使样式写对了，真实内容仍可能绕过限制：
-
<img alt="为什么CSS3弹性盒中设置了width后仍会被内容无限撑大？" >默认按原始尺寸渲染，必须额外加max-width: 100%+height: auto，否则撑破限制 - 连续长英文或 URL（如
https://example.com/very-long-path-with-no-dashes）不换行，需加word-break: break-all或overflow-wrap: break-word <table> 默认无视 <code>max-width，得配table-layout: fixed+ 显式width- 父容器自身必须有宽度约束（
width、max-width或弹性上下文），否则一切min-width: 0和flex-basis都白搭
最常被忽略的一点：所有这些收缩逻辑都依赖父容器形成有效的 BFC 或弹性上下文；如果父容器是浮动、绝对定位或未清除的 float，它的宽度可能本身就是 auto，那子项再怎么设 min-width: 0 也无处可缩。
