用 min-width 设置宽度保底，需配合 display: block/inline-block 并排除 white-space 干扰；min-height 失效常因浮动、flex 布局或无内容撑高；box-sizing: border-box 下 min-width/min-height 作用于含 padding/border 的总尺寸。
盒子内容少时宽度塌缩，怎么保底？
当 width 未显式设置，且父容器不约束、子内容又很短（比如空格、单个字母），块级盒子会收缩到内容最小宽度——这常导致布局错位或背景/边框“看不见”。min-width 就是专治这个的：它不强制撑开，但设一道底线。
常见误用是只写 min-width: 200px 却忘了清除浮动或处理内联元素的默认行为。实际要配合：
-
display: inline-block或display: block（确保 min-width 生效） - 避免父容器有
white-space: nowrap之类干扰换行的设置 - 若盒子内是纯文本，注意
文字超长时溢出，min-width 还管用吗？
不管用。min-width 只防“太小”，不限制“太大”。文字超长导致盒子无限变宽，得靠 max-width 或文本截断控制。但两者可共存：
div {
min-width: 120px;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}这时盒子宽度在 120px 到 300px 之间弹性变化，既不塌也不爆。
立即学习“前端免费学习笔记（深入）”；
min-height 对垂直方向失效？检查这些点
min-height 在子元素浮动、绝对定位或使用 display: flex 时容易“失灵”，本质是父容器高度未形成 BFC 或未参与高度计算。
典型场景和对策：
- 子元素
float: left→ 父容器加overflow: hidden或display: flow-root - 父容器是
flex容器 → 确保没设align-items: flex-start导致子项不撑高 - 内容为空但想显示背景 → 必须配合
height: 0或伪元素占位，单靠min-height不会渲染空白区域（除非有边框/内边距）
min-width/min-height 遇上 box-sizing: border-box 怎么算？
它们始终作用于「最终渲染宽度/高度」，也就是包含 padding 和 border 的总尺寸（前提是 box-sizing: border-box）。例如：
div {
box-sizing: border-box;
min-width: 200px;
padding: 10px;
border: 2px solid #000;
}此时内容区（content）最小只有 200px - 2×10px - 2×2px = 176px。如果内容真塞不下，盒子会继续变宽——min-width 是下限，不是固定值。
真正容易被忽略的是：百分比 min-width（如 min-width: 50%）按包含块宽度计算，但若包含块高度为 auto，百分比 min-height 会无效（CSS 规范明确要求此时视为 0）。
