min-height百分比值不生效的根本原因是父容器无明确高度，导致浏览器无法计算基准；需确保html/body设height:100%或用100dvh，并注意box-sizing、flex-shrink等干扰因素。
min-height 百分比值为什么经常不生效？
根本原因是父容器没高度，min-height: 100% 这类百分比值依赖父级明确的高度计算，而默认 html 和 body 没设 height，导致计算结果为 0。
必须显式设置：html, body { height: 100%; } 或更稳妥的 html, body { height: 100dvh; }（100dvh 能响应 iOS 地址栏收起/展开，避免 100vh 的跳变问题）。
- 只写
min-height: 100%但漏掉任一上级容器的高度声明，就会失效 -
100vh在 Safari iOS 中地址栏变化时可能不准，100dvh是当前推荐替代方案（支持 Chrome 105+、Safari 16.4+、Firefox 110+） - 如果父容器是 Flex 或 Grid 容器，还需确认其自身是否具有有效高度（比如没被
flex: 1或min-height约束）
box-sizing: border-box 对 min-height 的实际影响
min-height 默认只约束内容区（content area），padding 和 border 会额外叠加——这意味着你设了 min-height: 300px + padding: 20px + border: 2px，元素总高度至少是 344px。
加 box-sizing: border-box 后，min-height: 300px 才真正表示“整个盒子（含 padding 和 border）最小高 300px”。
- 务必全局重置：
* { box-sizing: border-box; }，否则个别漏设的元素会破坏布局一致性 - 即使用了
border-box，Flex 子项仍可能被压缩：默认flex-shrink: 1允许收缩到低于min-height，需额外加flex-shrink: 0 - 不要混用
height: auto和min-height在同一元素上——height: auto优先级更高，会覆盖min-height的约束
min-height 与 height:auto 如何配合实现“内容撑开但有底线”？
想让元素随内容自然增高，又保证不塌陷到过小，正确组合是：height: auto（可省略，因为是默认值） + min-height，而不是用 height 固定值。
典型场景：卡片、文章正文、侧边栏等需要呼吸感又不能失守底线的区域。
- 错误写法：
height: 300px; min-height: 300px;→ 高度被锁死，内容多时溢出 - 正确写法：
min-height: 300px;（height不设或显式写height: auto）→ 内容少时保持 300px，内容多时自动拉高 - 若需限制上限，可叠加
max-height，并配overflow: auto实现滚动（如textarea或折叠面板）
Flex 容器中子元素 min-height 失效的隐藏原因
即使父容器设了 height: 100%、子元素写了 min-height: 400px，在 Flex 布局里仍可能被压缩成一条线——这不是 min-height 失效，而是 flex-shrink: 1 在作祟。
Flex 子项默认允许收缩（flex-shrink: 1），当容器空间不足时，它会无视 min-height 往下压。
- 解决方法只有两个：
flex-shrink: 0（最常用），或改用flex: none（等价于flex: 0 0 auto） - 别试图靠
min-width/min-height强行对抗flex-shrink，逻辑上不成立 - 如果容器本身高度由内容撑开（比如没设
height），那子元素的min-height就不会触发——此时应检查是否真需要 Flex，或改用display: grid+minmax()
实际调试时最容易忽略的是：把 min-height 当成“绝对保障”，却忘了它始终受制于父容器高度来源、盒模型计算方式、以及 Flex/Grid 的收缩规则。这三个层面任何一个断链，都会让最小高度形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
