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

These are initial settings in a flex container:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

The shorthand would be:

• flex: 0 1 auto

Therefore, even though you haven't specified these rules in your code, they apply to the images.

The images cannot grow, they can shrink (equally and just enough to avoid overflowing the container), and they are initially sized to their natural width (400px).

This is what you're seeing in Firefox. The images are shrinking to fit nicely within the container.

In Firefox, flex rules are overriding the natural dimensions of the image.

In Chrome, however, the reverse is true. The dimensions of the images are prevailing.

The simple cross-browser solution is to wrap the images in another element, so this new wrapper becomes the flex item and takes on the default flex: 0 1 auto, and nothing needs to be overridden.

img {
  width: 100%;
}

<h1>Window width:</h1>

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

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

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

In terms of which browser is adhering to spec guidance, it appears that would be Firefox. In a flex container, flex rules should prevail:

7.1. The flex Shorthand

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

The flex item’s main size property is either the width or height property.

I say Firefox "appears" to be correct because the spec is saying that flex rules should prevail over the CSS width and height properties.

Of course, the dimensions of the images in this case are not defined in CSS. They are the natural dimensions of the image. So this scenario may be left open for interpretation, and Chrome may not be violating any guidelines.

However, in another scenario, where the height property was a factor, Firefox stuck with flex, while Chrome went with height: Why is Firefox not honoring flexed div's height, but Chrome is?

Answer 2

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