使用 min-height 替代 height 可解决容器高度不随内容扩展的问题。设置 height 会固定元素高度，导致内容溢出；而 min-height 允许容器在最小高度基础上自动伸展，适应内部内容。配合清除浮动、避免绝对定位、合理使用 Flex 布局等方法，可确保父容器正确撑开。例如文章卡片组件中，min-height 保证最小高度同时允许动态扩展，提升布局稳定性与用户体验。
当使用CSS盒模型时，如果发现容器高度没有随着内容增加而自动扩展，很可能是设置了固定高度（height）或忽略了内容撑开容器的机制。这种情况常导致内容溢出或布局错乱。解决方法之一是用 min-height 替代 height，让容器在基础高度之上能随内容自然伸展。
为什么 height 会导致高度不扩展？
当你给一个元素设置 height: 200px，无论内部内容有多少，这个元素的高度都会被锁定为200px。一旦内容超出，就会出现滚动或溢出问题，除非显式处理 overflow。
例如：
.box {
height: 200px;
background: #eee;
}
<div class="box">
<p>这里有很多文字……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>可能已经超出200px了。</p>
</div>
此时多余内容会被截断或溢出容器，视觉上“消失”或覆盖其他元素。
使用 min-height 让容器自适应内容
将 height 换成 min-height，就能解决这个问题：
.box {
min-height: 200px; /* 最小高度为200px */
background: #eee;
}
这样，容器在内容较少时保持至少200px高；内容增多时，会自动向下扩展以包裹所有子元素，实现真正的“内容撑开”。
配合其他属性确保完整撑开
有时候即使用了 min-height，仍可能出现高度异常，原因可能包括：
- 子元素浮动（float）未清除，导致父容器塌陷
- 使用了绝对定位（position: absolute），脱离文档流
- flex 或 grid 布局中未正确设置 stretch 行为
推荐做法：
- 清除浮动：给父容器添加 overflow: hidden 或使用 clearfix 技术
- 避免不必要的 position: absolute
- 在 Flex 布局中，确认父容器没有限制高度，子项可自由伸展
实际应用场景示例
比如一个文章卡片组件：
.card {
min-height: 100px;
padding: 16px;
border: 1px solid #ddd;
background: white;
}
.card p {
margin: 0 0 10px;
}
不管文章只有一行还是多行，.card 都能完整包裹内容，同时保证最小视觉高度，用户体验更稳定。
基本上就这些。用 min-height 替代 height 是应对内容动态变化的简单有效方式，既能控制最小展示空间，又能允许自然扩展，避免布局问题。不复杂但容易忽略。
