min-width: 0仅解除Flex子项默认的min-width: auto限制，不自动换行或隐藏溢出；必须作用于Flex直接子项、配合flex-shrink: 1、明确宽度来源及text-overflow三属性同级生效。
flex子项加min-width: 0为什么没反应
不是CSS失效，而是min-width: 0只做了“解锁收缩权限”这一件事：它覆盖了浏览器给Flex直接子项默认设的min-width: auto（实际表现是内容最小宽度），但不会自动换行、截断或隐藏溢出。你看到没变化，大概率是因为：
- 没加在Flex容器的**直接子元素**上——中间嵌套一层
<div>就失效 - 子项同时写了
flex-shrink: 0，收缩能力被彻底关闭，min-width: 0被绕过 - 用了
flex: 1简写，它等价于flex: 1 1 0%，而0%在某些场景下会让min-width: 0不稳定；推荐改用flex: 1 1 0 - 开发者工具里检查Computed面板，发现
min-width仍显示为auto或一个具体像素值，说明被其他规则覆盖了
text-overflow: ellipsis不生效的真正原因
很多人写了white-space: nowrap、overflow: hidden、text-overflow: ellipsis，但省略号就是不出来。根本问题不在这三个属性本身，而在于容器还没真正收缩——文本仍在可视区域内，只是盒子被撑大了。
-
min-width: 0必须和这三者写在**同一个元素上**，缺一不可 - 该元素还得有明确宽度来源：
width、max-width或flex-basis（不能是auto或靠flex: 1推导出来的“剩余空间”） - 如果是
<span>这类行内元素，得额外加display: block或inline-block，否则text-overflow不生效 - 替换元素如
<img>、<input>不响应min-width: 0，要单独配max-width: 100%或width
移动端和嵌套Flex中容易漏掉的关键点
在flex-direction: column下，min-width: 0不影响垂直伸缩，但文本截断/换行仍在水平方向发生，所以子项自己必须设max-width: 100%，否则依然撑开。
- 嵌套Flex容器里的子项，同样受
min-width: auto限制，必须单独再加min-width: 0 - 表格、
inline-block元素嵌套在Flex项里，也得加min-width: 0，否则Flex不会尝试压缩它们 - 长单词或URL需换行时，不能只依赖
word-break: break-all——必须先加min-width: 0解锁收缩，再加overflow-wrap: break-word（语义更合理）或word-break: break-all（兜底用） - 全局设
word-break: break-all会破坏正常排版，应限定在.log-token、.url这类class上
min-width和width冲突时谁起作用
min-width永远优先于width生效，三者关系是：min-width ≤ 实际宽 ≤ max-width。
立即学习“前端免费学习笔记（深入）”；
-
width: 200px; min-width: 300px;→ 最终宽是300px，不是200px -
width: 100%; min-width: 400px;在视口小于400px时，最终宽仍是400px - 百分比
min-width（如min-width: 50%）依赖父容器有明确宽度；如果父容器没设width，它的计算宽度可能是0，导致min-width失效 - 表格中
min-width在table-layout: fixed下不生效——列宽由第一行<th>或<td>决定，可靠写法是给<col>设width
min-width: 0不是万能解药，它只对“可收缩的盒模型”生效。遇到图片、输入框、表格单元格这些替换元素或特殊渲染机制，得配合各自对应的约束手段，比如max-width: 100%、box-sizing: border-box或<col>显式声明。 
