Why, in Safari, does the `height` of `img`, when a flex-item, not stretch to the size of its flex-line when `align-items: stretch` is applied?

Question

For the purposes of this question:

• dimension = `height` or `width`.
• FC = Flex-container.
• FI = Flex-item.

---

Scenario 1

It seems, in both Chrome & Safari, when an img's 'container' is specified in 1 dimension, the other dimension'll try to become a size so that the 'container' retains the aspect ratio:

Here's a demonstration of this concept:

img {
 object-fit: cover;
 width: 200px;
}

<img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg"/>

---

Scenario 2

However, Safari's ability to do this seems to break when the img is a FI.

#fc {
  display: flex;
}

img {
  object-fit: cover;
  width: 200px;
}

p {
 margin: 0;
}

<div id="fc">
 <img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue iaculis arcu sit amet aliquam. Quisque at auctor diam. Proin quis sem sed magna feugiat euismod non non ante. Sed at orci ac felis molestie pretium eget at nisl. Nam nec quam sit amet arcu molestie molestie. Maecenas sed eros non sem interdum egestas vitae eu sem. Quisque quis auctor sapien. Fusce risus odio, semper sed mattis quis, fringilla id arcu. Proin tempus finibus neque id ultrices. Nunc condimentum posuere ex, ut aliquam purus tempus quis.
 </p>
</div>

---

Presuming my understanding of what's gone on above is correct...

Is there a work-around? (i.e. a solution that works for Safari?). If not, I should be able to write up the original problem and perhaps you can suggest another way to achieve my goal (my goal's basically to have an img side-by-side to a block of text - and if the vw gets small, and the text height shoots down and gets longer, I want the imgs 'container''s height to similarly increase and match the text's height / height of the FC (when there's only 1 flex-line).

P.S. There's some other Safari troubleshooting I have to do on my website. It seems to concern imgs. If anyone was aware of any resource they could pass on that notes some of the ways in which we're confined to write code (in order to take into account Safari - particularly imgs) that'd be appreciated.

Answer 1

Blink, Firefox, and WebKit contributors worked together the last few months on improving flex item images.

• Chrome 90+ and Firefox 89+ have very few known incompatibilities (sometimes when images have % width; compare the code snippet below in Chrome vs Firefox).
• Safari Tech Preview 123 made a lot of progress compared to the previous Safari stable release but still has a few more known issues.

If you have a flexbox with image items that renders differently across browsers, please let us know. Don't worry about duplicate issues, but shorten the demonstration cases if you can. If you think the buggy browser is

• Safari: add a comment with example on this bug
• Chrome or Firefox: add a comment with example on this issue

If your comment is not acknowledged after 2-3 days, respond with a link and I'll triage.

<div style="display: flex; width: 100px;">
  <img src="//placekitten.com/100" style="width:100%;">
  <div style="width:100px; background: orange"></div>
</div>