Different implementation of Flexbox in Firefox and Chrome

The following code works as expected in Firefox

I disagree with this because for me Chrome is behaving as expected for 2 reasons:

1. You set the width of the image to be 100% which means 100% of their containing block (container) that is defined by 600px. So each image will be 600px

2. The image cannot shrink past its content size due to the default min-width configuration (note that using unset is equivalent to initial in this case so it’s somehow useless). So the image will be kept at 600px

If you add min-width:0 the image will shrink only in width:

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

the behavior of chrome seems to have changed so the below is no more needed in the last version

Now if we consider the height you are facing the stretch effect that is also not the same in both browser. It’s a bit trikcy to explain¹ but if you change the default alignment you will get the expected result within chrome:

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
  align-items:flex-start;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

Or if you change the height using percentage value you will make it fail and also have what you want (this is a bit hacky because we are triggering another issue to fix the actual one)

.r {
  width: 100%;
  height:658%; /*any value here with %*/
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

Why Firefox is behaving like that?

I don’t know exactly, but the logical explanation is that Firefox is not considering the default min-width configuration and is giving priority to keeping ratio and not to the stretch effect.

¹ Initially your image are defining the height of the container since they are big (around 700px in height), this height is used by the container then we apply the properties to our image so they shrink in width and since the default alignment is stretch they will stretch to the height of the container that was initially defined by their own intial height creating this rendring.

If we remove the stretch effect, the image will try to keep their ratio since we removed the height constraint.

Same logic if we consider percentage value for height. This one will fail to auto and we get back to the default behavior (keeping the aspect ratio)

Another alternative

The issue arised due to the use of image that are replaced element with intrinsic dimension where the calculation of width/height is not as simple as other element.

To avoid such behavior, better wrap the image inside a div and avoid having them as flex items.

.r {
  width: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
</div>