用 min-height 替代 height 可避免内容压缩、换行异常和溢出问题，因其允许容器随内容自然撑高；需设安全下限、避免与 height 冲突，并配合 box-sizing、overflow 等属性增强健壮性。
当css盒模型出现高度计算偏差，比如内容被意外压缩、文字换行异常或内部元素溢出时，用 min-height 替代 height 是最直接有效的解决方式。它让容器“至少”撑开到指定高度，同时允许内容自然撑高，避免强制截断或布局错乱。
为什么 height 会导致压缩？
设置固定 height 会锁定容器高度，一旦内容（如字体大小变化、padding 增加、行高调整、动态插入文本）超出该值，就会发生裁剪、重叠或滚动条意外出现。浏览器不会自动“让步”，而是严格按设定值渲染。
- 内联元素（如 span、img）的 vertical-align 影响行高，间接改变容器实际占用高度
- font-size 或 line-height 变化后，原有 height 值可能不再匹配真实内容高度
- 使用 box-sizing: border-box 时，padding 和 border 仍计入 height，容易误判总占用空间
min-height 怎么用才不踩坑？
min-height 不是万能兜底，需配合合理基准和上下文使用：
- 设为一个“安全下限”，例如 min-height: calc(2.5em + 12px) —— 覆盖文字行高 + 内边距
- 避免与 height 同时设置（除非明确需要“最小+最大”限制），否则 height 会覆盖 min-height
- 在 flex 或 grid 容器中，子项默认不收缩，此时 min-height 仍有效，但需检查父容器是否设置了 align-items: stretch
配合其他属性更稳
单靠 min-height 有时还不够，建议组合使用：
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden 或 overflow: auto：防止内容溢出破坏布局，尤其适合卡片、摘要等有高度预期的模块
- box-sizing: border-box：确保 padding/border 不额外增加高度，让 min-height 计算更可预期
- display: flex; flex-direction: column + flex: 1 子项：在需要填满剩余空间时，比单纯 min-height 更灵活
基本上就这些。min-height 不是黑科技，但它把控制权交还给内容本身，让样式更健壮、更适应变化。不复杂但容易忽略。