html - Image flex item does not shrink height in a flexbox

Question

I have a flex container which contains an img flex item.

I want this img to disregard its intrinsic height (90px) so that the height may shrink to match the sibling's flex item height (as per the default align-items: stretch style).

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

Answer 1

I think you are looking at this the wrong way.

The image itself is 90px high which means the content of the flex item has a height of 90px(because your image is the flex item). So your div on the right side is matching the image height because it is higher than the div's height and not the other way around.

Think of it as if you have set the height of the flex item(image) to 90px. So it won't shrink pass it unless you set it to a smaller height. Even though you didn't explicitly set the image height to 90px but it is 90px naturally so it is implicitly set which causes the confusion. So while it will stretch beyond 90px in height it won't go under it because that's the height of the flex item content.

In the case where you swapped it for a div and it works like you imagined is because there is no height set on the .item div which is the flex item.