min-width 仅在可压缩上下文中生效：根元素无效；flex 子项须先设 min-width: 0 再设具体值；table 中仅 table 或 fixed 布局下的 th/col 支持。
min-width 能设，但不是所有地方都起作用——关键看元素是否处于「可压缩」的上下文中。
为什么给 html 或 body 设 min-width 没用
直接写 html { min-width: 800px; } 或 body { min-width: 800px; } 基本无效。原因很实在：
- 浏览器视口本身不参与盒模型收缩逻辑，根元素的
min-width被忽略或降级处理 - 即使部分浏览器渲染出效果，也只是限制
body内容区宽度，用户仍可拖小窗口，内容被裁剪、滚动条出现，布局照样错乱 - 真正需要保护的是具体组件（比如卡片、表单、表格列），不是抽象的“网页”
flex 子项设 min-width 必须先写 min-width: 0
在 display: flex 容器里，子项默认有 min-width: auto，等价于“内容最小宽度”。哪怕你写了 width: 50%，内容一长就撑开父容器，min-width: 240px 也压不住。
- 必须先显式重置：
min-width: 0—— 解除默认压缩限制 - 再设具体值：
min-width: 240px才会生效 - 完整写法示例：
.card { flex: 1; min-width: 0; min-width: 240px; } - 漏掉
min-width: 0是前端最常踩的坑之一
表格中 min-width 的生效条件很苛刻
给 table 元素设 min-width 是有效的，比如 table { min-width: 600px; }，能防止整表塌缩；但给 td 或 th 单独设，大概率失效。
-
td/th上的min-width只在table-layout: fixed下才参与列宽计算 - 默认
table-layout: auto时，列宽优先按内容宽度决定，min-width直接被无视 - 可靠写法只有两种：
<col style="width: 150px">，或只在第一行th上设min-width并配table { table-layout: fixed; width: 100%; } - 后续行的
td写了min-width也没用，表格渲染机制根本不读它们
真正起效的前提从来不是“写了没写”，而是“元素是否处在可压缩的上下文里”——flex 容器、grid 容器、百分比宽度的响应式容器、table-layout: fixed 表格，这些才是 min-width 的有效战场。随便套在 div 上却不控制父级布局，等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
