min-height: auto 不合法，浏览器会忽略；正确做法是依赖默认 height: auto 或设置 min-height（如 200px）来实现内容自适应高度。
min-height: auto 无效？这是 CSS 的设计事实
直接说结论：min-height: auto 在标准 CSS 中**不合法**，浏览器会忽略它。这不是你写错了，而是 CSS 规范压根没定义这个值——min-height 只接受 length、percentage、max-content、fit-content、min-content 或 unset/initial/inherit，就是没有 auto。
想让容器高度随内容撑开，用 height: auto（默认就行）
绝大多数情况下，你根本不需要显式设置任何高度——块级元素默认就是 height: auto，也就是“内容多高，容器就多高”。常见误操作是不小心加了 height: 100px、height: 100% 或 position: absolute，把自然流破坏了。
检查以下几点：
- 删掉所有显式的
height声明（尤其是height: 100%，它依赖父容器有明确高度） - 确认没用
overflow: hidden配合浮动或 flex 子项导致塌陷 - 如果父容器是 flex 容器，子项默认
align-items: stretch，可能“拉高”了容器；可改用align-items: flex-start
需要最小高度但又不想限制上限？用 min-height + auto 行为组合
真正常用的是：给一个**最小高度底线**，同时允许内容超出时自动延展。这时写 min-height: 200px 就够了——它不会阻止内容变高，只是保证至少 200px。
容易踩的坑：
-
min-height: 100vh在移动端可能因地址栏缩放导致计算异常，慎用于“视口全高+自适应内容”场景 - 在
display: grid或display: flex容器里，子项若设了min-height: 100%，行为取决于父容器是否设了明确高度，不是“自适应内容” - IE11 不支持
min-height作用于表格单元格（display: table-cell），需换布局方式
内容为空时容器消失？那不是高度问题，是渲染逻辑问题
空 div 没高度，不是因为 height 设置错了，而是它没内容、没边框、没内边距、没伪元素——纯 CSS 意义上“不可见”。这时候加 min-height: 1px 或 padding: 1px 是最直白的解法。
更合理的做法取决于场景：
- 表单区域占位：用
min-height: 40px+border明确视觉边界 - 加载中状态：用伪元素
::before { content: "" }或临时插入 - Flex/Grid 布局中“留空行”：用
min-height: 0防止子项收缩过度（尤其配合flex: 1时）
别在空容器上死磕 height: auto —— auto 是对内容而言的，没内容，就没有“自动”的依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
