min-height 是修复 Safari Flex 塌陷最可靠方案，因不依赖祖先高度、支持内容自适应；需配合 flex: 1、min-height: 0 及 100dvh 等特性协同生效。
旧版 Safari（iOS 9–12.4 / macOS Safari 9–12）和部分新版本（Safari 14–15.6）中，flex: 1 子项高度为 0 或远小于预期，不是代码写错，而是浏览器对高度上下文的解析失效——min-height 是最直接、最可控的锚定点。
为什么 min-height 比 height 更适合修复塌陷
给父容器设 height: 100% 容易断链：只要任意一层祖先没设高度，整条链就归零；而 min-height 不依赖上游，自己就能“立住”一个可测量的基准，且允许内容超出时自然撑高，避免裁剪或滚动异常。
-
min-height: 100vh在 iOS Safari 中可能含地址栏高度，造成底部留白；优先用min-height: 100dvh（Safari 16.4+ 支持），回退到min-height: -webkit-fill-available或min-height: 100vh - 不要直接给
html或body设min-height，某些安卓 WebView 会忽略；作用于主布局容器（如#root或.app）更可靠 - 若容器内含图片或异步加载内容，图片需加
height: auto，否则 Safari 可能冻结其内在尺寸估算，导致初始渲染仍塌
min-height 配合 flex: 1 的典型写法
仅设 min-height 不够，必须配合子元素的拉伸逻辑，否则子项仍按内容高度收缩。
- 父容器设
display: flex; flex-direction: column;和min-height: 100dvh - 关键子项（如主体内容区）设
flex: 1，同时显式加min-height: 0（垂直布局下必须） - 避免在该子项上再写
height: 100%或align-self: flex-start，它们会覆盖align-items: stretch的默认拉伸行为
.layout {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.main {
flex: 1;
min-height: 0;
}
min-height 在嵌套 Flex 容器中的坑
嵌套 Flex 容器是 Safari 塌陷高发区：外层设了 min-height，内层子项却仍不拉伸，常因内层容器自身没触发 stretch 行为。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 内层 Flex 容器必须也设
min-height: 0（如果它是flex: 1子项），否则 Safari 会沿用min-height: auto冻结其高度计算 - 内层子项若含
<img alt="如何修复CSS Flex在Safari下的高度塌陷_通过min-height设定基准" >，确保它有height: auto或显式宽高比容器，否则 Safari 无法估算最小高度 - 慎用
overflow: hidden配合flex: 1，某些 Safari 版本会因此抑制align-items: stretch行为
真机调试时怎么快速验证 min-height 是否生效
别只看视觉效果或 layout 边框，那些可能被错觉误导。
- 用 DevTools 的 Layout 面板检查父容器的
computed height，确认它确实大于 0 - 临时加
outline: 1px solid red到父容器，红框是否出现是最直观的验证方式 - 如果红框没出来，说明
min-height没被识别——检查是否被position: absolute父级干扰，或是否漏了display: flex声明
真正卡住人的不是 min-height 本身，而是它必须和 flex 的拉伸链、子元素的 min-height: 0、以及 Safari 对图片/iframe 的尺寸冻结逻辑协同生效——少一环，就回到塌陷原点。
