min-height 不能替代 height，因其仅设下限、允许内容撑开，而 height 强制固定高度易致溢出；生效需父容器有可计算高度、避免脱离文档流、注意 flex 项目对齐方式及 viewport 单位动态问题。
min-height 为什么不能替代 height
直接设 height 会让元素死卡在固定高度，内容超长就溢出或遮挡；min-height 才是真正“至少这么高，但可以更高”的行为。它只约束下限，不干涉内容自然撑开——这是防塌陷的核心逻辑。
常见错误现象：min-height: 100px 写了但没生效，往往因为父容器没高度（比如父级是 display: flex 但没设 height 或 min-height），或者元素是 float 或绝对定位导致脱离文档流。
- 确保父容器有可计算的高度来源（比如显式
height、min-height，或继承自视口/父 flex 容器） - 避免对
float元素或position: absolute元素依赖min-height布局，它们不参与常规高度计算 - Flex 项目默认不响应
min-height，需加align-self: flex-start或设父容器align-items: flex-start
min-height: 100vh 在移动端的坑
100vh 看似简单，但在 iOS Safari 和部分安卓浏览器里，地址栏展开/收起会动态改变视口高度，导致元素忽高忽低甚至滚动条闪现。这不是 bug，是规范行为——vh 跟的是「视觉视口」，不是「布局视口」。
使用场景：全屏卡片、登录页、单页应用根容器。但别用在需要稳定占位的侧边栏或头部。
立即学习“前端免费学习笔记（深入）”；
- 更稳的替代方案是
min-height: 100dvh（dvh= dynamic viewport height），Chrome 105+、Safari 16.4+ 支持 - 兼容老浏览器时，可用 JS 监听
resize并更新style.minHeight，但注意节流 - 慎用
100vh+overflow-y: auto组合，容易造成滚动嵌套和 touchmove 失效
flex 容器里 min-height 失效的典型情况
当一个元素是 display: flex 的子项，默认 align-items: stretch 会强制拉伸它填满交叉轴，此时 min-height 会被忽略——拉伸优先级高于最小高度限制。
参数差异：align-items 的值决定是否尊重 min-height：
-
stretch（默认）：无视min-height，按容器高度拉伸 -
flex-start/center/flex-end：min-height生效，元素按自身内容+最小高度布局 - 单独对某一项设
align-self: flex-start就够，不用改整个容器
min-height 和 box-sizing 的配合要点
min-height 指的是 content-box 高度（不含 padding 和 border），这点和 height 一致。但如果你用了 box-sizing: border-box，实际渲染高度 = min-height + padding + border，可能意外超出预期。
性能影响几乎为零，但兼容性要注意：IE8+ 支持 min-height，但 IE8 不支持 box-sizing，所以混用时得加前缀或降级处理。
- 想让
min-height包含 padding 和 border？只能手动减去：min-height: calc(200px - 20px)（假设 padding-top + padding-bottom = 20px） - 更稳妥的做法是统一用
box-sizing: border-box，并在写min-height时心里默算 border/padding 占比 - 不要依赖
min-height控制带transform: scale()元素的高度，缩放不影响布局盒尺寸
真正难的不是写对 min-height，而是判断它该作用在哪一层——父容器没高度，子元素再怎么设 min-height 都是空转。盯住高度链的断点，比调数值重要得多。
