height 永远不会被内容撑开；它强制固定高度，与 min-height 的自适应行为本质不同，常见“撑开”错觉源于 box-sizing、浮动/绝对定位子元素或 overflow: hidden 等干扰因素。
height 设置后内容溢出却不撑开容器？
因为 height 是**固定高度声明**，它会强制元素保持指定值，不管子内容多高。浏览器不会自动“让 height 变大”来适应内容——这和 min-height 的行为完全不同。
什么情况下 height 会被内容撑开？
实际上：height 永远不会被内容撑开。但你可能观察到“好像撑开了”，常见于以下几种干扰因素：
-
box-sizing是content-box（默认）时，padding和border会额外增加元素总高度，造成“比设置的 height 还高”的错觉 - 子元素用了
float或position: absolute，脱离文档流，父容器无法感知其高度，此时即使内容很多，父容器仍只按height渲染 - 父容器有
overflow: hidden，内容实际已溢出，但被裁剪了，误以为“没撑开”
想让容器随内容自适应，该用哪个属性？
用 min-height 替代 height：
div {
min-height: 200px; /* 至少 200px，内容多就自动变高 */
/* 不再写 height: 200px */
}其他可行方案：
立即学习“前端免费学习笔记（深入）”；
- 完全去掉
height，靠内容自然撑开（最常用） - 用
height: fit-content（注意：IE 不支持，Firefox/Chrome 较新版本才稳定） - Flex 容器中设
align-items: flex-start+ 子项不设固定高度，也能避免意外截断
调试时怎么快速判断是不是 height 导致的问题？
打开浏览器开发者工具，选中元素，在 Styles 面板里：
- 看
height是否被显式设置（且不是auto） - 检查 computed 标签页里的
height值是否等于你写的值（而不是auto或更大） - 临时把
height改成auto，刷新看内容是否正常显示——如果恢复正常，基本就是它卡住的
真正容易被忽略的是：很多人在写响应式布局时，给 height 加了媒体查询，却忘了在小屏下重置为 auto，结果内容被硬生生截掉一截。
