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的弹性逻辑在起作用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 加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
• 若子项含，确保它有height: auto或显式尺寸，否则Safari会卡住最小高度估算

最常被忽略的一点：你看到的“失效”，往往不是min-height写错了，而是它所依赖的高度链断在了某一级——从html开始逐层检查Computed Height，比反复调样式更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！