I am learning flexbox and how flex items are laid inside the flex container with their initial width being flex-basis and then shrunk and grown when there is negative and positive space respectively. However, when I tried this in practice I see differences in how it works across two browsers - Firefox and Chrome when the flex items are images.
Suppose I want two flex items which are images (700px and 900px wide) in two equal columns inside a centered flex container with max-width:960px.
img { width: 100%;}.wrapper { width: 90%; margin: 0 auto; max-width: 960px; display: flex;}<p> Two Images side by side , overflows in Chrome but shrinks in Firefox </p><div class="wrapper"><img src="https://www.unsplash.it/700/300" alt=""><img src="https://www.unsplash.it/900/300" alt=""></div><p> Two Images side by side , overflows in Chrome but shrinks in Firefox </p><div class="wrapper"><img src="https://www.unsplash.it/700/300" alt=""><img src="https://www.unsplash.it/900/300" alt=""></div>In Firefox they work how I expected them to be. The flex images each with base size: 960 px (image width = 100% of the width of the flex container) and then are shrunk to 480px each . However, in Chrome images are with their intrinsic width (700 and 900 px) and overflowing the flex container (image width 100% of the parent flex container doesn't work). Also, in the Chrome Inspector if I hover over the flex container I see the overflowing area of the flex container being shaded:
I'd previously learned the shaded portion for flex containers shows the white space available for items to grow when their width: max-content. So, I really dot understand why the overflowed area in the flex container is showing up as shaded in this case as I can't think of items growing to that space.
I learned (Why don't flex items shrink past content size?) that you can fix this by setting the min-width for images to something like 0
img {min-wdth : 0px }This CSS does make Chrome behave like Firefox in displaying the flex boxes but I am not sure why. What I understood from the Stack Overflow answer is for images the min-width = min-content is the intrinsic size of the images and as such it can't shrink below that. However, what doesn't make sense to me is why the width of the images doesn't increase (to the parent flex container width of 960px) when they each have a width of 100% since it is more than min-width = min-content of images (960 px > 700px or 900px) and why for one browser you need to add min-width:0px and for the other it's not needed.