flex-basis:0在Safari中不遵循父元素高度的问题咨询

API 探路者

2026-8-2

问题描述

这段代码在Chrome和Firefox中运行正常，图片能适配父元素高度并完全容纳其中，但在Safari浏览器里图片会出现溢出情况。我测试发现，给相关元素添加overflow:hidden属性，或者移除flex-basis:0就能修复这个问题。

想请教大家两个问题：

有没有人能分享下相关的经验或细节？
2023年Flexbox已经趋于稳定，这是否属于Safari的浏览器Bug？

代码示例

CSS代码

.parent {
  display: flex;
  flex-direction: column;
  height: 200px;
  overflow: hidden;
  border: 1px solid red;
}

.child {
  display: flex;
  flex-basis: 0;
  height: 100%;
}
.innerChild {
  height: 100%;
}
img {
  max-height: 100%;
}

HTML代码

<div class="parent">
  <div class="child">
    <div class="innerChild">
    <img src="https://picsum.photos/id/237/200/600"/>
    </div>
  </div>
</div>