Flex in Firefox shrinks images automatically, but not in 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%;
}

Window width:


  
  
  


Wrapped in 500px wide div:


  

    
    
    
  

---

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

img {
  width: 100%;
}

---

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