弹性盒子容器高度随内容变化是正常响应式特性，应使用min-height保底并允许自然撑开，配合flex-direction: column和gap等属性实现自适应布局。
弹性盒子容器高度随内容变化是正常行为，不需要强行“固定”高度。关键不是让容器“不变化”，而是用 min-height 给它一个最小支撑，避免内容少时塌陷、内容多时又自然撑开。
为什么容器高度会变？
因为 flex 容器默认的 align-items: stretch 会让子项在交叉轴（通常是垂直方向）拉伸填满容器。但如果容器自身没有设定高度，它就会根据内容自动计算——内容少就矮，内容多就高。这不是 bug，是弹性布局的响应式特性。
用 min-height 替代 height
直接写 height: 300px 会把容器锁死，内容超出就溢出或滚动；而 min-height: 300px 表示“至少 300px 高，但可以更高”。这样既保底，又保留伸缩性。
- 适合卡片、面板、侧边栏等需要视觉稳定感但内容长度不确定的区域
- 配合 flex-direction: column 使用效果更直观（主轴垂直，内容向下堆叠）
- 可结合 max-height 和 overflow: auto 控制过长内容的显示方式
注意 align-items 和 flex-shrink 的影响
即使设了 min-height，如果子元素设置了 flex-shrink: 1（默认值），且容器空间紧张，子项仍可能被压缩，导致内容截断。此时可：
立即学习“前端免费学习笔记（深入）”；
- 给关键子项加 flex-shrink: 0 防止被压扁
- 对文本类内容加 min-height: 0 或 overflow: hidden 避免 flex 压缩引发的换行异常
- 检查父级是否意外设置了 height: 0 或 overflow: hidden，这会限制伸缩上限
一个实用组合写法
比如做一个内容区容器：
.content-box {display: flex;
flex-direction: column;
min-height: 200px;
gap: 12px;
}
这样标题、正文、按钮依次排列，空时保持 200px，内容增多就自动下延，不需 JS 计算，也不用媒体查询。
