必须加min-width: 0，因flex子项默认min-width: auto（按内容推算隐式下限），导致无法收缩、父容器被撑开；该声明须作用于直系flex项目，并配合flex: 1 1 0、white-space: nowrap、overflow: hidden和text-overflow: ellipsis才生效。
Flex子项不收缩？必须加min-width: 0
Flex子项默认有min-width: auto，不是“没设最小宽”，而是浏览器按内容推算出一个隐式下限——比如一段长URL、连续英文或图片原始宽。哪怕你写了flex: 1或width: 50%，它也不会缩得比这个内容宽度更小，结果就是父容器被撑开、横向溢出、布局崩塌。
min-width: 0是唯一能显式覆盖该默认值的标准写法，它不设“最小宽度”，而是告诉Flex布局：“这个元素可以缩到0，别管内容多宽”。DevTools里看computed样式，如果min-width还是auto，基本就锁定根源了。
- 必须加在**直系flex项目**上，比如
.item，而不是它的父容器 - 如果子项内部还有flex（如图标+文字组合），内层需收缩的子项也得单独加
min-width: 0 - 对
<img>、<iframe></iframe>等固有尺寸元素无效，需额外加max-width: 100%和height: auto - Firefox执行更严格，Chrome有时“悄悄妥协”，但别依赖这种差异
min-width: 0和flex: 1搭配才真正起效
min-width: 0只是解锁收缩能力的“钥匙”，不是最终效果。它必须和弹性分配逻辑配合才能让子项占满剩余空间并可控收缩：
-
flex: 1等价于flex: 1 1 0%，而0%是相对父容器宽度计算的百分比，内容未渲染前无法确定基准，容易导致flex-basis推导异常 - 推荐用
flex: 1 1 0（即flex-basis: 0），表示“初始宽度为0，全靠弹性系数分配”，更彻底压制内容撑开 - 若用
flex: 1 1 0，min-width: 0在多数现代浏览器中可省略，但Safari旧版本建议保留或补flex-basis: 0%兜底 - 父容器本身必须有明确宽度约束，比如
width: 100%或max-width: 400px；否则Flex容器会按内容自适应，根本不存在“溢出”
想截断文字加省略号？四件套缺一不可
只加min-width: 0不会自动让文字变省略号，它只是打开收缩开关。真正触发text-overflow: ellipsis需要四个样式同时作用于同一元素：
-
min-width: 0：解除默认收缩锁 -
white-space: nowrap：必须写在这里，不能写在父级；否则文字提前折行，连“单行溢出”前提都不满足 -
overflow: hidden：裁剪动作本身，但没min-width: 0时，它对flex子项常形同虚设 -
text-overflow: ellipsis：只对块级元素生效，<span></span>类行内元素要先加display: block或inline-block
常见错误是把overflow: hidden错加在最外层wrapper上，但它必须作用于**实际发生溢出的容器**，也就是那个含文本的flex子项本身。
表格和Grid里min-width为啥不生效？机制不同
Flex里加min-width: 0有效，不代表所有场景都通用。表格和Grid有自己的规则：
- 在
table-layout: fixed下，列宽由第一行的<th>或<code><col>决定，后续<td>里写的<code>min-width基本没用 - 想让某列“最小不小于120px”，必须用
<col width="120">或在第一行<th style="min-width: 120px"> <li>Grid布局中，<code>min-width: 0同样要加在grid item上，尤其用1fr分配列宽时，某列内容多就全列变宽 - 百分比
min-width（如min-width: 30%）依赖父容器有明确宽度；如果父容器没设width、也没被其他约束撑开，那它的计算宽度就是0，30%自然也是0
最容易被忽略的是：忘了给父容器设width或max-width，或者误设了min-width: -webkit-fit-content这类非标准值，它们会覆盖min-width: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
