如何解决CSS Flex布局在Safari浏览器下的缩放Bug_添加flex-basis-auto属性-css教程-PHP中文网

旧版safari（ios 9–12.4/macos 9–12）中flex-basis: auto是高度坍塌根源，因错误将flex: 1解析为flex-basis: auto并叠加min-height: auto；应显式设flex-basis: 0px并配合min-height: 0修复。

如何解决css flex布局在safari浏览器下的缩放bug_添加flex-basis-auto属性

flex-basis: auto 不是修复 Safari 缩放 Bug 的正确方案——它恰恰是旧版 Safari（iOS 9–12.4 / macOS Safari 9–12）里导致高度坍塌的根源。你看到的“缩放后比例失衡”“刷新才恢复”，本质是 Safari 错误地将 flex: 1 解析为 flex-basis: auto，再叠加默认 min-height: auto，导致 Flex 项拒绝拉伸。

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

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

下载

为什么 `flex-basis: auto` 在 Safari 里会出问题

Safari 9–12 把 flex: 1 当作 flex: 1 1 auto，而非标准的 flex: 1 1 0
auto 意味着“按内容高度推算初始尺寸”，一旦父容器高度未锚定（比如靠 height: 100% 但祖先没设高），子项就坍缩为 0
浏览器缩放时，WebKit 会重新触发尺寸计算，但因 flex-basis: auto 依赖内容固有尺寸，而缩放又影响渲染树测量顺序，结果就是左右项收缩不一致（如左项文字多、撑开，右项图片少、坍缩）

必须显式写死 `flex-basis` 值

水平布局（flex-direction: row）：用 flex-basis: 0px 或 flex: 1 1 0px
垂直布局（flex-direction: column）：同样用 flex-basis: 0px，不能写 0%（Safari 会忽略）
若需保留最小内容高度：老版本 Safari 不支持 min-content，仍得用 0px + min-height: 0

`min-height: 0` 是配套刚需，不是可选项

Safari 对 min-height: auto（默认值）处理极激进，会直接阻断 flex-basis: 0px 的拉伸启动
所有参与 flex: 1 分配的子元素都必须加：
min-height: 0（垂直主轴）或 min-width: 0（水平主轴）
如果子元素含 <img>，额外加 height: auto，否则 Safari 可能冻结其内在尺寸估算

真正卡住人的不是 flex-basis，而是校准链

flex-basis: 0px 生效的前提是：
- 父容器有确定高度（如 height: 100vh 或 top/bottom 固定定位）
- 子元素没被 min-height 卡死
- 没混用 height: 50% 和 flex: 1（Safari 会优先按 height 计算，导致 flex-grow 失效）
少一个环节，坍塌就照常发生——这不是 bug，是 Safari 旧 WebKit 对初始尺寸推断的硬性逻辑。