min-height仅在内容高度不足时兜底生效，90%失效源于父容器压制：如height:0、overflow:hidden、flex未调align-items、html/body缺height:100%、绝对定位包含块高度不足等。
min-height 不是“设了就撑开”，它只在内容不够高时兜底；内容足够多时，它完全不干预——真正失效，90% 是父容器没放行。
为什么写了 min-height 却还是塌缩成一行高
常见现象：min-height: 300px 在 DevTools 里显示已计算，但元素视觉上只有 24px 高。这不是 CSS 解析失败，而是父容器没给它“撑开”的机会：
- 父容器设置了
height: 0、max-height: 200px或overflow: hidden，直接压死了子元素的扩展空间 - 父容器是
display: flex且未修改align-items，子项被默认stretch拉满——此时min-height根本没触发条件 - 父容器本身高度依赖百分比（如
height: 100%），但祖先链中html或body缺失height: 100%，导致计算值为0 - 子元素用了
position: absolute，它的包含块可能不是你看到的那个父级，而是更外层的relative元素，而那个块本身高度不足
Flex/Grid 容器里 min-height 不起作用？先看 align-items
Flex 项默认 align-items: stretch，哪怕只有一行文字，也会被拉到父容器全高。这不是 min-height 失效，是它根本没被需要——因为内容高度还没低于设定值。
想让子项回归“内容决定高度”模式：
- 给父容器加
align-items: flex-start（所有子项统一左对齐、不拉伸） - 或只针对某个子项加
align-self: flex-start - 若父容器本身
height: auto，且子项没设height，那min-height就能正常响应内容增减
min-height 和 height 同时写，谁说了算
行为很明确：height 是硬指令，min-height 是保底线。两者共存时：
-
height: 150px; min-height: 200px→ 实际取200px（min-height覆盖更小的height） -
height: 250px; min-height: 200px→ 实际就是250px（height优先，min-height形同虚设） -
height: 200px; min-height: 200px→ 冗余，改其中一个就可能意外破坏布局
正确做法：需要弹性高度时，**只写 min-height，确保 height 是默认的 auto（不用显式声明）**。
移动端用 min-height: 100vh 要小心软键盘和 dvh
iOS Safari 旧版本（如 iOS 12）在软键盘弹出时，vh 不会重算，导致 min-height: 100vh 的容器实际高度远超屏幕，底部留大片空白；现代解法是用 100dvh（dynamic viewport height）：
- 兼容写法：
min-height: 100vh; min-height: 100dvh;（后写的生效） -
100dvh在 iOS 16.4+、Chrome 105+、Firefox 114+ 均支持 - 如果必须兼容极老设备，用 JS 动态设置：
el.style.minHeight = window.innerHeight + 'px'，并监听resize事件
真正容易被忽略的是：min-height 只管下限，不管溢出。内容超出时，得靠 overflow 或布局机制（比如 flex + flex-direction: column + flex: 1）来控制滚动或截断——它自己不会帮你加滚动条，也不会阻止文字换行撑破边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
