使用 min-height 可解决CSS容器无法被内容撑开的问题，常见于固定高度、浮动或绝对定位导致脱离文档流的情况；将 height 替换为 min-height 能保证容器最小高度的同时允许内容自动扩展，适用于侧边栏等需自适应高度的场景，配合清除浮动、flex布局设置可确保正常显示，避免内容截断。
当CSS容器无法被内容撑开时，通常是因为设置了固定高度或忽略了内容的实际尺寸。这种情况下，使用 min-height 是一个非常实用的解决方案，它能让容器至少达到某个高度，同时允许内容超出时自动扩展。
为什么容器高度撑不开？
常见原因包括：
- 给容器设置了 height: 100px 这样的固定值，内容超过后会被隐藏或溢出
- 父元素未设置正确的高度继承，导致子元素无法参考
- 使用了绝对定位或浮动，脱离了正常文档流
用 min-height 替代 height
将原本的 height 改为 min-height，可以让容器在内容较少时保持最小高度，内容增多时自然撑开。
.container {min-height: 200px;
background-color: #eee;
}
这样即使内容很少，容器也不会太矮；内容变多时，容器会自动变高，不会截断内容。
立即学习“前端免费学习笔记（深入）”；
配合其他属性确保正常布局
为了确保 min-height 能正确生效，注意以下几点：
- 父级容器不要有阻碍高度传递的设置，比如 height: 0
- 避免子元素浮动未清除，必要时添加 overflow: hidden 或使用clearfix
- Flex 布局中，父容器设为 display: flex 时，子项的 min-height 可能受主轴方向影响，需检查 flex-direction
实际应用场景示例
比如一个侧边栏，希望默认高 300px，但内容多时能自动拉长：
.sidebar {min-height: 300px;
border: 1px solid #ccc;
}
无论内容是一行文字还是长列表，都能良好显示，不会出现滚动条或截断。
基本上就这些。用 min-height 代替 height，是解决内容撑不开问题最简单有效的方式，既保证了最低视觉完整性，又具备良好的自适应能力。不复杂但容易忽略。
