min-height 在响应式布局中可防止内容塌陷，允许容器随内容撑开且不低于基准值；需避开 height 冲突、flex 拉伸覆盖、vh 兼容性及动画无效等陷阱。
min-height 在响应式布局中如何防止内容塌陷
当容器内内容动态加载或高度不确定时，min-height 是比 height 更安全的选择。它允许容器随内容自然撑开，同时保证不小于某个基准值——比如导航栏下方留出足够可视区域，或卡片在空数据时不缩成一条线。
- 常见错误：用
height: 100vh做全屏容器，但顶部有固定 header 时，实际可用高度不足，导致底部被截断；应改用min-height: calc(100vh - 64px) -
移动端适配注意：iOS Safari 对
vh单位有滚动缩放问题，min-height: 100dvh（dvh是动态视口单位）更可靠，但需检查兼容性（Chrome 105+、Safari 16.4+） - 不要对 flex 子项单独设
min-height除非父容器已设display: flex且方向明确，否则可能被 flex 的默认拉伸行为覆盖
与 height / max-height 混用时的优先级和冲突表现
min-height 不会覆盖 height，但当两者共存且 height 值小于 min-height 时，min-height 生效；而 max-height 会限制最终高度上限。三者同时存在时，实际高度 = max(min-height, min(height, max-height))。
- 典型误用：
height: 200px; min-height: 300px;→ 实际高度为300px，height形同虚设 - 动画场景陷阱：对
min-height做 CSS transition（如展开收起）无效，浏览器不支持该属性的过渡；应改用max-height配合合理初始/目标值（如max-height: 0; max-height: 500px;），或用height+overflow: hidden - 表格单元格（
td、th）中min-height通常被忽略，需改用min-block-size或包裹一层div
Flex 容器中 min-height 失效的典型原因
在 display: flex 的父容器里，子元素默认会拉伸（align-items: stretch），此时若子元素未显式设置 align-self，其 min-height 可能被拉伸行为压制，表现为“设了也不起作用”。
-
解决方法：给子元素加
align-self: flex-start，再配合min-height - 另一种情况：父容器本身没设高度，flex 子项即使设了
min-height也无参考基准；需确保父容器有明确高度来源（如height: 100%且祖先链上有高度）或使用min-height: 0触发 flex 最小尺寸计算 - 注意
min-height: fit-content在 flex 中行为不稳定，建议只用于现代浏览器且搭配align-self显式控制
避免 min-height 引发的滚动条意外出现
当容器设了 min-height 且内容超出时，若未控制溢出，容易出现双层滚动（外层页面滚动 + 内层容器滚动），尤其在 modal 或 sidebar 场景下体验极差。
立即学习“前端免费学习笔记（深入）”；
- 关键检查点：确认容器是否设置了
overflow: auto或overflow-y: auto；如不需要内部滚动，应设overflow: visible或overflow: hidden - 嵌套场景典型写法：
section { min-height: 400px; overflow-y: auto; max-height: 60vh; }这样既保底又限高，避免无限拉伸 - 使用
min-height: min(400px, 80vh)可兼顾最小保障与视口比例，但注意 Safari 15.4 之前不支持min()函数
真正难的不是写上 min-height，而是判断它该加在哪一级、是否被父容器的布局模式覆盖、以及内容变化后是否还符合预期——尤其是 flex 和 grid 嵌套、动态内容注入、跨浏览器视口单位这几个交叉点，最容易漏测。
