弹性基础：0 不尊重 safari 中的父身高

Question

下面是适用于 chrome 和 firefox 的代码，其中 img 尊重父级高度并适合它，但在 safari 中，图像溢出。

我可以通过添加 overflow: hidden 或删除 flex-basis 来解决这个问题。

有人可以分享信息吗？

此外，它的 2023 和 flexbox 几乎稳定。 这是safari中的错误吗？

 .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%; }

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

safari快照

铬快照

Answer 1

您可以将道具 object-fit 添加到您的 img 中，以便它可以覆盖其父容器的整个宽度：

img {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
}