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 也压不住。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须先显式重置：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 上却不控制父级布局，等于白写。