height: auto 是块级元素默认行为，无需手动设置；常见问题包括显式 height、flex 布局中父容器无高度、absolute 定位脱离文档流、box-sizing 导致视觉异常，且 min-height: fit-content 兼容性差。
height: auto 是默认行为，但常被意外覆盖
很多开发者以为需要手动设置 height: auto 才能让盒子随内容撑开，其实这是块级元素的默认表现。问题往往出在人为覆盖：比如写了 height: 100px、min-height: 0、display: flex 且父容器没设高度、或用了 position: absolute 等。只要没显式限制高度，内容自然撑开。
检查时重点看这几点：
- 是否误加了
height、max-height或overflow: hidden - 父容器是否用了
display: flex且没设align-items: flex-start（flex 项默认拉伸） - 是否用了
position: absolute—— 此时元素脱离文档流，不再撑父容器 - 是否设置了
box-sizing: border-box但边框/内边距过大，导致视觉上“没撑开”
min-height: fit-content 不是万能解，兼容性有限
min-height: fit-content 看起来很理想：让容器至少容纳内容，又不强制拉伸。但它在 Safari（
更稳妥的替代方案：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height: max-content（语义更明确，兼容性略好于fit-content） - 对简单文本容器，直接用
min-height: 1em或min-height: 24px防空白塌陷 - 若内容含图片或异步加载元素，建议配合
min-height: 0+height: auto在父 flex 容器中重置基线
Flex 容器里子项高度不自适应？可能是 align-items 作祟
在 display: flex 的父容器中，子项默认受 align-items: stretch 影响——即使你没写，它也会强行拉高子项到容器高度，掩盖了“内容撑开”的本意。
