Flex in Firefox shrinks images automatically, but not in Chrome

Question

<h1>Window width:</h1>

<div style="display: flex">
  <img src="https://unsplash.it/400/225?image=10" alt="1">
  <img src="https://unsplash.it/400/225?image=11" alt="2">
  <img src="https://unsplash.it/400/225?image=12" alt="3">
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <img src="https://unsplash.it/400/225?image=10" alt="1">
    <img src="https://unsplash.it/400/225?image=11" alt="2">
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

This is what the result looks like in Firefox:

This is what the result looks like in Chrome:

As you can see, in Firefox, the images have been nicely shrunk and resized, so that all there images fit in one line without wrapping or cropping. On Chrome, the images remain in their original sizes, which causes cropping in small windows or divs.

Is this expected? Am I doing something wrong? How can I get the same result in both Firefox and Chrome?

Answer 1

I this case, add align-items: flex-start to the flex container, and then this rule to the images

img {
  min-width: 0;
  width: 100%;
}

As align-items defaults to stretch, so they stretches, then min-width defaults to auto which again tell them to be their original size, and finally, give them width: 100% so they fit horizontally and adjust its height to maintain aspect ratio.

Note, after quick browser test, this won't work on IE11 (but works on Edge), so bugs exists little bit everywhere, based on the used code. The second option, where one wraps the image's, works on IE11 though.

Stack snippet

img {
  min-width: 0;
  width: 100%;
}

<h1>Window width:</h1>

<div style="display: flex; align-items: flex-start;">
  <img src="https://unsplash.it/400/225?image=10" alt="1">
  <img src="https://unsplash.it/400/225?image=11" alt="2">
  <img src="https://unsplash.it/400/225?image=12" alt="3">
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex; align-items: flex-start;">
    <img src="https://unsplash.it/400/225?image=10" alt="1">
    <img src="https://unsplash.it/400/225?image=11" alt="2">
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

---

Another option is to wrap the images, and set the img to width: 100%

img {
  width: 100%;
}

<div style="display: flex;">
  <div>
    <img src="https://unsplash.it/400/225?image=10" alt="1">
  </div>
  <div>
    <img src="https://unsplash.it/400/225?image=11" alt="2">
  </div>
  <div>
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

---

This post, css3-flexbox-maintain-image-aspect-ratio, has links together with a good explanation, about how/why the browsers render differently