flex-basis: 0 not respecting parent height in safari

Question

below is the code which works on chrome and firefox in which the img respects the parent height and fits into it but in safari, the image overflows.

I can fix this by adding overflow: hidden or removing the flex-basis.

can someone share info on it?

also, it's 2023 and flexbox is almost stable. Is this bug in 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 snapshot

chrome snapshot

Does this answer your question? [Flexbox code working on all browsers except Safari. Why?](https://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why) — 0stone0, Feb 01 '23 at 16:12

score 0 · Answer 1 · edited Mar 04 '23 at 10:42

0

You can add object-fit: cover; to your img so it covers the entire width of its parent container:

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

edited Mar 04 '23 at 10:42

Moritz Ringler

9,772
9
21
34

answered Feb 01 '23 at 16:19

Gabriel Cunha

156
1
1
7

flex-basis: 0 not respecting parent height in safari

1 Answers1