html - Different implementation of Flexbox in Firefox and Chrome

Question

The following code works as expected in Firefox, but in Chrome, the images become much bigger than the flex container.

.r {
  width: 100%;
  height: auto;
  min-width: unset;
  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>

Answer 1

@TheRuler, The best solution is to wrap the image tag in a div or span, to render the images as per Firefox. Firefox will also work fine if you wrap the images in a div or span.

Now you can ask me why this is correct.

Basically display flex has defaults value attached to it, which are:

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

Now, for both case Firefox and Chrome the default value is same. But still the rendering is different in the both browser specially in case of image as a flex child.

Now who is correct is debatable, and who is following the guidelines properly is also debatable.

If you look at the specification of flex, it says, flex rules should prevail over the CSS width and height properties. So in this case Firefox is shrinking the size of images to fit it properly in 600px parent.

Now if you see this example,

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

So if you see this code in both browser you will see the difference. Chrome values the height property of the flex child where as Firefox doesn't value it. Same goes for image height and image width. Chrome doesn't prevail the height.

So both browser went with their own implementation, which is in this case doesn't match each other and it is debatable who is correct.

So wrap them in span or div to make it work in both the browser which should be the correct answer with no hack. Other solution will solve the problem but they are kind of hack to solve the problem.

Please let me know if you get it Thanks