min-height不生效最常见原因是父容器无高度参考：如flex容器未设height、子元素浮动或绝对定位脱离文档流、align-items: stretch强制拉伸覆盖min-height，以及box-sizing:border-box导致实际高度超出预期。
min-height 为什么在父容器里不生效
最常见的情况是父容器没提供可计算的高度来源，min-height 就像没锚点的船——它需要一个“参考系”才能起作用。比如父级是 display: flex 但没设 height 或 min-height，子元素的 min-height: 200px 就会被忽略。
浮动（float）或绝对定位（position: absolute）的子元素也不参与父容器高度计算，此时哪怕写了 min-height，父容器依然塌陷。
- 检查父容器是否脱离文档流：用浏览器开发者工具看 computed height 是否为 0
- 给父容器加
height: 100%或min-height: 100vh（注意移动端100vh的坑） - 避免对
float元素本身设min-height做布局控制，改用 BFC 触发方式（如overflow: hidden或display: flow-root）
Flex 容器中 min-height 被忽略的真相
Flex 子项默认 align-items: stretch，这个行为会强制拉伸子项填满交叉轴高度，直接覆盖 min-height。这不是 bug，是 flex 布局的优先级设计。
想让 min-height 生效，必须打破 stretch 行为：
- 在子元素上单独加
align-self: flex-start（推荐，影响最小） - 或改父容器的
align-items: flex-start（全局生效，慎用） - 若需垂直居中又保留最小高度，用
align-self: center+min-height组合，此时高度以内容+最小值为基准，再居中
100vh 在 iOS Safari 里忽高忽低怎么办
min-height: 100vh 在移动端实际表现不稳定，因为 vh 单位基于「视觉视口」（visual viewport），地址栏展开/收起时高度会变，导致元素跳动甚至滚动条闪现。
这不是 CSS 写错了，是浏览器按规范执行的结果：
- 现代方案：改用
min-height: 100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+ 支持 - 兼容老版本：用 JS 监听
resize，节流后更新element.style.minHeight = window.innerHeight + 'px' - 别把
100vh和overflow-y: auto配在一起，容易触发嵌套滚动和 touchmove 失效
min-height 和 box-sizing: border-box 的隐性冲突
min-height 永远只约束 content-box 高度，和 height 一致。但如果你同时用了 box-sizing: border-box，实际渲染高度 = min-height + padding + border，可能比预期高一大截。
例如：min-height: 200px; padding: 20px; border: 2px solid #000; box-sizing: border-box;，最终高度至少是 244px。
- 调试时看 computed height，别只盯声明值
- IE8 不支持
box-sizing，混用时要加前缀或降级处理 - 如果目标是“整体容器至少 200px 高”，就把
min-height设得更小一点，预留 padding/border 空间
真正容易被忽略的是：min-height 不是“兜底保险”，它依赖整个祖先链的高度传导。某个中间父级漏了高度上下文，整条链就断了——这比写错一个值更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
