flex子项min-height不生效的根本原因是高度上下文缺失或被flex-shrink/align-items等默认行为压制，需确保父链显式设高、禁用收缩、避免百分比及内联元素限制。
Flex子项的min-height不生效，基本可以断定：它根本没被浏览器纳入高度计算——不是属性写错，而是缺少可参照的高度上下文，或被Flex默认行为压制。
父容器高度链断裂：html/body/中间层全得设高
Flex容器本身默认height: auto，子项写的min-height: 200px或min-height: 100%都无处锚定。浏览器连“100%相对于谁”都算不出来。
- 用开发者工具逐层点开目标元素的父级，在「Computed」面板里查
height值——只要出现auto，链就断了 -
html和body必须显式设高：html, body { height: 100%; }只是起点，不够稳；更推荐html, body { min-height: 100vh; } - 中间任意一层 wrapper（比如
.layout、.app）若没设height或min-height，也会卡住 - 临时加
border: 1px solid red到父容器上，看它是否视觉“塌陷”成一条线——这是最直觉的验证方式
Flex子项被flex-shrink: 1压缩，min-height形同虚设
Flex默认允许子项收缩，哪怕你写了min-height: 200px，当空间不足时，它仍可能被压到内容高度以下——这不是bug，是弹性逻辑在执行。
- 加
flex-shrink: 0直接阻止压缩，让min-height真正起作用 - 更稳妥写法：
flex: 0 0 auto;（flex-basis: auto让内容撑开基础高度，flex-shrink: 0锁死不缩） - 避免混用
flex: 1和min-height：flex: 1隐含flex-basis: 0，会与min-height冲突；若需弹性填充，改用flex: 1+ 固定min-height（如min-height: 200px），别用百分比
Safari对min-height: 100%特别苛刻，别在子项上写百分比
Safari（尤其14–15.6）会把只设了min-height: 100vh的Flex父容器视为“不可信包含块”，导致子项min-height: 100%直接解析为0px——它符合规范，但实现更保守。
- 绝对不要给Flex子项写
min-height: 100%，这是Safari里的经典陷阱 - 想让子项占满剩余空间，优先用
flex: 1，兼容性远好于百分比方案 - 若必须用
height类声明，改写为height: 100%; min-height: 0;，并确保父容器有明确height（不是min-height） - 注意：现代浏览器会给Flex子项默认加
min-height: auto，它会压制height: 100%，所以min-height: 0这句不能省
align-items: stretch覆盖了min-height，子项没机会“撑”
Flex子项默认align-items: stretch，它会让子项在交叉轴（通常是高度）上拉伸填满容器——此时min-height不会触发，因为内容高度已经≥设定值。
- 如果子项内部有文字、图片等固有内容，它的自然高度可能已超过
min-height，那这个属性就“没机会生效” - 检查子项是否意外设置了
align-self: flex-start或height: auto，这些会关闭stretch行为 - 若想强制让
min-height兜底，可显式设align-self: flex-start，再配合min-height和height: auto - display类型也关键：
span这类inline元素不响应min-height，得先改成inline-block或block
最容易被忽略的，不是min-height写在哪一行，而是它依赖的整条高度链是否真实存在——从html开始逐层检查Computed Height，比反复调样式快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
