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 影响——即使你没写，它也会强行拉高子项到容器高度，掩盖了“内容撑开”的本意。
要恢复自适应高度，只需：
- 给子项加
align-self: flex-start - 或给父容器统一设
align-items: flex-start - 注意：如果父容器本身高度为
auto，子项仍会随内容撑开；但如果父容器有固定高度（如height: 300px），那flex-start只控制对齐，不改变子项自身高度逻辑
表格单元格（td/th）高度无法自适应？检查 vertical-align 和 white-space
表格单元格天生支持内容撑高，但常因样式干扰失效。典型诱因：
-
vertical-align: top或middle本身不影响高度，但搭配line-height过大会造成内部留白错觉 -
white-space: nowrap导致长文本溢出却不换行，看起来“没撑开” - 父
table设了table-layout: fixed—— 此时列宽固定，单元格高度由内容决定，但若内容含块级元素（如div），需确保其display未被设为inline
快速验证：临时移除所有自定义样式，只保留 border，看是否恢复撑高。是，则问题出在 CSS 层叠上。
真正难处理的是混合布局中嵌套表格再进 flex 的场景——此时盒模型层级叠加，min-height 可能被多层 height 覆盖，得一层层 inspect 计算值。
