min-width: 0是解除flex/grid子项默认min-width: auto的必要前提；百分比min-width依赖父容器有明确宽度；min-width始终优先于width生效。
flex子项被撑开却设不了最小宽度？先写min-width: 0
Flex容器里子元素默认有min-width: auto，它不是0，而是“内容能放下的最小宽度”——哪怕你写了width: 50%，一段长文本或一张图照样把整行顶宽。这不是bug，是规范行为。
必须显式加min-width: 0才能解除这个隐性锁，之后再设具体值才真正生效：
-
min-width: 0是重置起点，不是最终值；不加它，min-width: 200px可能完全没反应 - 常见于头像+昵称+操作按钮的横向列表，昵称文字一长，按钮就被挤出视口
- Grid布局同理，尤其用
1fr分配列宽时，某列内容多就全列变宽，min-width: 0同样要加在grid item上
百分比min-width失效？检查父容器有没有明确宽度
min-width: 50%不是“占屏幕一半”，而是“占父容器宽度的50%”。如果父容器没设width、也没被其他约束撑开（比如flex主轴方向没内容、或者自身是display: block且无内容），那它的计算宽度就是0，50%自然也是0。
典型失效场景：
- 侧边栏用
min-width: 25%，但父.layout没设宽度，结果侧边栏塌成一条线 - 卡片用
min-width: 80%+max-width: 600px，但卡片父容器是display: flex且没设width，实际表现仍是内容宽度 - 解决办法：给父容器加
width: 100%，或确保它被上下文撑开（比如父容器本身有min-width或内容）
min-width和width冲突时谁赢？min-width永远优先
浏览器宽度计算逻辑很直接：min-width ≤ 实际宽 ≤ max-width。只要width算出来小于min-width，就按min-width来；大于max-width，就按max-width来。
这意味着：
-
width: 200px; min-width: 300px;→ 最终宽是300px，不是200px -
width: 100%; min-width: 400px;在视口 - 别指望
width: 100%能“覆盖”min-width——它只是参与计算的中间值，不是最终裁定者
表格里min-width不生效？关键在<col>或第一行
table-layout: fixed下，列宽由第一行的<th>或<code><td>决定，后续行写的<code>min-width会被忽略。这不是CSS失效，是表格渲染机制本身不读取后续行的尺寸声明。
可靠写法只有两种：
- 在
<col>标签上直接设width：<col style="width: 120px">，最稳定，不受内容干扰 - 只在第一行对应单元格写
min-width: 120px，且确保该单元格没被white-space: nowrap之类属性顶住 - 若用
table-layout: auto，min-width能生效，但性能差、渲染不可控，不推荐用于数据量大的表格
真正容易被忽略的是：min-width不是万能胶，它只在“有压缩倾向”的场景起作用。比如普通块级元素没被flex/grid/响应式容器挤压，设了也看不出效果；而一旦涉及收缩、换行、内容动态变化，漏掉min-width: 0或父容器宽度缺失，布局就可能在某个临界尺寸突然崩掉。
