min-height 无效的常见原因包括父容器无高度约束、元素为 inline 类型、子元素脱离文档流、table 元素兼容性差，以及 Flex 容器中 align-items: stretch 的覆盖；需结合 display、overflow、flex 属性及开发者工具综合排查。
min-height 设置后为什么元素没变高？
常见原因是父容器没给高度约束，或者元素是 inline 元素（如 span）。min-height 只对块级或弹性/网格容器生效，inline 元素得先加 display: inline-block 或 block 才能起作用。
另外注意：如果子元素用了 float 或绝对定位，可能脱离文档流，导致父容器高度塌陷，这时 min-height 看起来“无效”——实际是父容器没内容撑开，它本身高度仍是 0。
- 检查父容器是否设置了
height、overflow或其他影响高度计算的属性 - 用浏览器开发者工具选中元素，看 computed 样式里
min-height是否被正确解析和应用 - 避免在
table元素或table-cell上直接设min-height，兼容性差，IE 下基本不生效
min-height 和 height 混用时的优先级怎么算？
min-height 不会覆盖 height，但会限制它的下限：当 height 值小于 min-height 时，最终高度取 min-height；当 height 更大，则以 height 为准。
不过要注意：如果同时写了 height: 100px 和 min-height: 200px，那 height 就被“压住”了，实际表现等同于只写 min-height: 200px。
- 想让元素“至少多高，但允许更高”，就只用
min-height，别配height - 想“固定高度，但内容超了要滚动”，用
height+overflow: auto - 想“最小高度 + 内容撑开 + 滚动”，用
min-height+max-height+overflow: auto
防止内容溢出时，min-height 配合什么最稳？
单靠 min-height 不能阻止文字或图片溢出容器，它只管容器自身高度。真正防溢出得组合使用：
比如长文本溢出：加 word-break: break-word 或 overflow-wrap: break-word；图片溢出：加 max-width: 100% 和 height: auto；整体内容超高：加 overflow: auto 或 overflow-y: auto。
-
min-height是“托底”，确保容器不会塌成一条线 -
overflow是“收口”，决定超出部分是否显示/滚动/裁剪 - 响应式场景下，
min-height: 100vh常用于全屏布局，但需注意 Safari 对vh在地址栏展开/收起时的重绘 bug，可改用min-height: 100dvh（现代浏览器支持）
Flex 容器里 min-height 为啥经常被忽略？
在 display: flex 的父容器中，子项默认会拉伸（align-items: stretch），此时子项的 min-height 会被 flex 轴对齐逻辑覆盖——尤其当父容器高度固定、且子项没设 align-self 时。
解决办法很简单：给子项显式设置 align-self: flex-start，或把 min-height 改成 min-block-size（逻辑属性，更稳定），或者直接在子项上加 flex-shrink: 0 防止被压缩。
- 不要依赖 flex 子项的
min-height来控制最小可视高度，优先用父容器的min-height+ 子项的flex行为组合 - 调试时打开 devtools 的 layout 面板，看 flex line 的基线和 cross size，比只看 computed height 更直观
有些布局里 min-height 看似设了却没反应，不是属性写错了，而是它正被 display 类型、flex 行为或父容器的尺寸上下文悄悄覆盖。动手前先确认渲染树里的盒模型状态，比反复调数值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
