height: auto 由内容、内边距和边框共同决定高度，依赖文档流布局；若内容为空或子元素浮动/绝对定位，则高度坍缩为0；固定高度易导致溢出，min-height 更安全灵活。
height: auto 是怎么决定高度的
height: auto 不是“没有高度”，而是让元素高度由内容、内边距、边框共同撑开。浏览器会先计算内容区域（content box）所需高度，再叠加 padding 和 border（取决于 box-sizing），最终得到元素总高度。
关键点在于：它依赖内容流式布局的自然行为——文字换行、子元素块级堆叠、图片原始尺寸等都会影响结果。一旦内容为空或全是浮动/绝对定位元素，height: auto 就可能坍缩为 0。
- 如果子元素用了
float或position: absolute，父容器不会感知其存在，height: auto无法撑开 -
box-sizing: border-box下，padding和border被包含在 height 内；content-box（默认）下则额外增加 - 表格单元格、Flex 项目、Grid 项目对
height: auto的响应逻辑不同，需单独验证
固定 height 值为何常导致内容溢出
写死 height: 200px 后，无论内容多少，容器都只保留这 200px 高度空间。超出部分默认被裁剪（overflow: visible 时会溢出到外部，但不撑开父级）。
常见误用场景包括：动态文本插入、响应式图片加载、用户可编辑区域。此时若没配好 overflow 或没预留弹性空间，就会出现文字被截断、按钮不可见、滚动条意外出现等问题。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden会静默裁剪，调试时容易忽略溢出内容 -
overflow: auto在需要时加滚动条，但移动端小屏体验差 - 固定高度 +
display: flex可能触发主轴拉伸行为，反而让子项被压缩，和预期相反
什么时候必须用固定 height
不是不能用固定高度，而是得清楚约束条件。典型刚需场景是 UI 组件尺寸契约化，比如按钮统一高 40px、卡片最小高度保持视觉节奏、Canvas 或 Video 容器需匹配媒体固有比例。
