min-width设为0在flex/grid中才能解除默认auto限制，因默认auto实际表现是内容最小宽度；min-width始终优先于width生效，三者关系为min-width≤实际宽≤max-width。
min-width设成0为什么没用
因为 min-width 的初始值就是 auto，而大多数浏览器会把 auto 解析为 0，但某些场景下（比如 flex 子项、table-cell）它实际表现是“内容最小宽度”，强行设 min-width: 0 才能真正解除限制。
常见踩坑：在 display: flex 容器里，子元素默认有 min-width: auto，导致即使写了 width: 50%，内容一长就撑开父容器。这时候必须显式写 min-width: 0。
- Flex 项目默认不收缩到比内容更小，
min-width: 0是破局关键 - Grid 项同理，尤其配合
fr单位时，不设min-width: 0容易溢出 -
min-width: 0不影响正常布局，只放开最小约束，安全可用
min-width和width冲突时谁生效
min-width 永远优先于 width——只要 width 计算值小于 min-width，最终宽度就取 min-width；反之则取 width。
典型场景：响应式卡片列表，希望小屏下卡片至少占满一行（min-width: 100%），大屏下最多宽 300px（width: 300px）。这时 min-width 确保不会被压缩坍塌，width 控制上限。
立即学习“前端免费学习笔记（深入）”；
- 如果同时设
width: 200px和min-width: 250px，最终宽是 250px -
max-width会再对结果做上限拦截，三者关系是：min-width≤ 实际宽 ≤max-width - 百分比
width和像素min-width混用时，注意父容器宽度是否动态变化
min-width在table-layout: fixed下失效？
不是失效，是被表格渲染机制覆盖了。固定布局（table-layout: fixed）下，列宽由第一行单元格的 width 或 min-width 决定，但后续行的 min-width 不再参与计算。
想让某列“最小不小于 120px”，必须在第一行对应 <th> 或 <code><td> 上设 <code>min-width: 120px，或者直接给 <col> 标签设 width。
-
<col style="width: 120px">最可靠，不受内容影响 - 只在
<td> 里写 <code>min-width对固定布局无效 - 若用
table-layout: auto，min-width能起作用，但性能差、渲染不可控 - 避免纯依赖视口单位做最小宽度，尤其文本类元素
- 推荐组合写法：
min-width: max-content（内容最小宽）或min-width: fit-content（适合块级） - 如需响应式弹性，用
min-width: clamp(120px, 20vw, 300px)更稳妥
用vw单位设min-width导致文字截断
min-width: 20vw 在小屏上可能只有 72px（手机竖屏），远小于一个中文字符宽度，导致文字强制换行或溢出容器。这不是 bug，是单位本身特性决定的。
真正防坍塌，要结合内容预期宽度来设值。比如按钮文字最少容纳 “加载中…”，可估算字符数 × 字体大小 ≈ 最小像素值。
最常被忽略的是 flex 和 grid 里的默认 min-width: auto，它不像看起来那么“自动”，而是带着强内容保护逻辑。不主动覆盖，布局就容易在缩放或内容变化时突然崩开。
