I've been scratching my head for the past day trying to figure out this image's behavior difference as a flex-item or nested in a div which acts as flex item. See the following code:
https://jsfiddle.net/0jnmkg18/
Example 1: Using 2 divs as flex items
<div class="flex-container">
<div class="img-box">
<img src="https://www.nicepng.com/png/full/335-3353016_delivery-van-icon-blue-.png" class="img-1"></div>
<div class="box"></div>
</div>
Example 2: Using img and div as flex items
<div class="flex-container">
<img src="https://www.nicepng.com/png/full/335-3353016_delivery-van-icon-blue-.png" class="img-2">
<div class="box"></div>
</div>
CSS:
.flex-container {
display: flex;
}
.img-box, img-2 {
width: 50%;
}
.img-1, box {
width: 100%;
}
In the first example, I have a flex container and inside I have 2 divs, one of them with a width=50% and the other one with width=100%. Obviously, this total width (150%) exceeds the container's width, so it has to shrink items. As the second div is double the width of the first one, and both flex-shrink properties are default (1), they shrink in the same proportion, so it resizes to 33% for the first div and 66% for the second div, as expected, because the second div has double the width of the first one. Then, the image scales as the parent div scales up and down. No problem here.
In the second example, instead of wrapping the img inside a div, the img acts as a flex-item directly. In this case applying the same width of 50% to the image, and 100% to the second flex-item (the div), I don't see the expected behavior. As you can see in the fiddle, the image is always 50% of the container's width, instead of 33%. I would expect that it would resize to 33% as the div's width is the double of the img's.
Why is this behavior difference? Playing with the code I realized that min-width=50% is being automatically set to the img, but I don't know why. If I add a min-width: 33% line the behavior is the same as the first example, but I don't understand why this min-width=50% property is acting under the hood and isn't resizing to half the other div's width in the first place.
Also, properties like flesh-shrink and flex-grow don't seem to work, as the img is always 50% when resizing browser, even if I set flex-shrink or flex-grow to enormous values. Also, if I set flex-basis=50% instead of width=50% to the img, it doesn't work at all. The image doesn't seem to "care" if there are other flex-items, it will always take the space defined instead of modifying. Why is this all happening? Why doesn't the image behave as the div of the first example when the same properties are applied? It's a flex-item after all.
NOTE: I'm not looking for a workaround, I can just wrap the image inside the div and it works as I expect it to work. I just want to understand this behavior in case I have to face it in the future. Also, I know that instead of setting the widths to 50% and 100% I can use 33% and 66% and get the desired effect, I just want to understand the behavior in this case.
Thank you very much.
