Flex子项min-height失效是因为父容器未提供高度参照，且flex-shrink:1会压缩子项；需设父容器height/min-height、子项flex-shrink:0或flex:0 0 auto，并检查html/body高度链。
Flex子项的min-height为什么没反应
它根本没被触发——min-height只在“内容高度小于设定值”时才起作用，而它的计算前提，是父容器得提供一个可参照的高度。Flex容器本身不自动产生这个参照，尤其当它没设height或min-height时，子项写的min-height: 200px就等于对着空气喊话。
父容器height: 100%为什么常被误用
height: 100%不是万能钥匙，它只是把父容器的高度“复制”自上一级——如果html和body没设高，那这100%就是100% of auto，结果还是auto。常见错误链：div.container { height: 100%; } → 上级body没设高 → 容器实际高度为auto → 子项min-height无处伸展。
- 检查
html, body是否至少有min-height: 100vh（比height: 100%更可靠） - 若父容器是Flex容器，别只靠
height: 100%，加min-height: 100vh或显式height: 400px更直接 - 临时给父容器加
border: 1px solid red，看它是否真的“塌陷”了——这是最快验证方式
Flex默认收缩行为会覆盖min-height
Flex子项默认flex-shrink: 1，当容器空间紧张时，它会主动压缩自己，哪怕你写了min-height: 200px，也可能被压到内容高度以下。这不是bug，是Flex的弹性逻辑在起作用。
- 加
flex-shrink: 0阻止压缩，保留min-height底线 - 更稳妥写法：
flex: 0 0 auto; min-height: 200px;（flex-basis: auto让内容撑开基础高度，flex-shrink: 0锁死不缩） - 避免混用
flex: 1和min-height：前者隐含flex-basis: 0，后者又受min-height: auto干扰，容易互相抵消
Safari 14–15.6里min-height看起来失效的真正原因
它不是不生效，而是计算上下文被Safari错误识别。比如父容器是Flex但只设了min-height: 100vh，Safari可能不把它当作“有明确高度的包含块”，导致子项的min-height: 100%或height: 100%直接算成0。
立即学习“前端免费学习笔记（深入）”；
- 必须用
height: 100vh（不能是min-height）显式声明父容器高度 - 子项别写
height: 100%，改用align-items: stretch（Flex默认值）+min-height: 200px - 若子项含
<img alt="为什么CSS Flex布局下min-height失效_检查父容器是否设置了height:100%" >，确保它有height: auto或显式尺寸，否则Safari会卡住最小高度估算
最常被忽略的一点：你看到的“失效”，往往不是min-height写错了，而是它所依赖的高度链断在了某一级——从html开始逐层检查Computed Height，比反复调样式更省时间。
