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 容器需匹配媒体固有比例。
但要注意：固定高度 + 百分比子元素（如 height: 100%）会失效，因为百分比高度依赖父级有确定高度——而父级若为 auto，则子级的 100% 计算结果为 0。
- 图标按钮：
height: 48px; width: 48px;，确保点击热区一致 - 轮播图容器：需匹配图片原始宽高比，常用
padding-top技巧替代固定height - 模态框头部/底部固定区域，中间内容区用
flex: 1或max-height控制
用 min-height 替代 height 实现弹性控制
多数所谓“需要固定高度”的场景，真正要的是“至少这么高”，而非“恰好这么高”。这时 min-height 是更安全的选择：它允许内容撑开，又保底不塌陷。
例如表单字段容器、文章卡片、导航栏，用 min-height: 60px 比 height: 60px 更健壮——多一行标题或加个 badge 都不会破坏布局。
-
min-height对 Flex/Grid 容器的主轴尺寸控制更友好 - 配合
max-height+overflow: auto可实现“有内容才滚动”的折叠区域 - 注意 Safari 旧版本对
min-height在 table-cell 中的支持不一致
内容撑开机制本质是 CSS 布局引擎对文档流的尊重。过度依赖固定高度，等于主动放弃浏览器原生的内容适应能力。真正难的不是写死一个数字，而是判断哪些地方值得让渡控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
