给body或html加min-width无效，因根元素不参与盒模型收缩逻辑，即使生效也仅限内容区且无法阻止窗口缩小；真正需保护的是具体组件。
为什么给 body 或 html 加 min-width 没用
直接写 html { min-width: 800px; } 或 body { min-width: 800px; }，页面缩小时该出现重叠还是重叠。这不是 bug，而是 CSS 规范行为：根元素不参与常规盒模型收缩逻辑，min-width 对它基本被忽略或降级处理。即使“生效”，也只是限制内容区最小宽，窗口照样能拖小，滚动条一出，布局照样错乱。
真正要保护的是具体组件——比如导航栏、卡片、表格列、表单区域。它们才是实际被挤、被盖、被换行的“受害者”。
min-width 在 flex 容器里失效？先写 min-width: 0
这是最常踩的坑。在 display: flex 的父容器中，子项默认有 min-width: auto，等价于“内容最小宽度”。哪怕你写了 flex: 1 或 width: 50%，只要里面文字一长，它就撑开整个容器，缩放时依然重叠。
- 必须显式加
min-width: 0解除默认约束 - 再叠加你想要的底线值，例如
min-width: 240px - 完整写法：
.nav-item { flex: 1; min-width: 0; min-width: 240px; } - 注意：两个
min-width声明不冲突，后者覆盖前者
表格列和绝对定位元素怎么防重叠
表格在 table-layout: fixed 下，min-width 不会作用于所有行，只对第一行的 <th> 或 <code><td> 生效；更可靠的是用 <code><col> 标签定义列宽：<col style="min-width: 120px">。
绝对定位元素（比如右上角通知 badge）脱离文档流，缩放时极易盖住其他内容：
- 避免用
right: 0+ 固定width，改用right: 1rem+max-width: 80% - 给其父容器设
position: relative和明确min-width - 必要时配合
@media在小屏下改用position: static
用 %、rem 替代 px 才是根本解法
缩放时重叠的本质，是大量 px 值（如 width: 1365px、margin-left: 265px）在视口变化后仍强行按原始像素定位，导致容器无法自适应。
-
rem适合字体、间距、卡片宽等全局缩放一致的场景 -
%适合弹性容器内部子项比例分配 -
max-width+margin: 0 auto比固定width更安全 - 慎用
float：没清除就会塌陷，引发后续元素上浮重叠；优先用flex或grid
复杂点不在怎么写 min-width，而在判断哪个容器真正在“被压缩”——它得处在可缩上下文里（比如 width: 100% 的父容器、flex 项目、table-cell），否则加了也白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
