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?

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 'contain

Solution 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.

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