Chrome v75 : Images with max-width stretched inside a flex column div

user_11465391 0
Viewed 544

Since the newer Chrome version (75.0.3770.80), few images on my website are stretched.

These images are in a div, with theses properties :

<div class="column">
    <img
        :src="insuranceLogo"
        class="insurance"
    >
    <span>
        {{ offer.offer_name }}
    </span>
</div>

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.insurance {
    width: 100%;
    max-width: 150px;
}

Until today, it was working great, but with the new Chrome version, my images are all stretched !

I tried on an older Chrome version, it was ok, so I updated it to the new one : same results, stretched.

My solution is to wrap my img tag inside a div. But I'm curious to know why this behavior changed.

Thanks ! :)

flexbox google-chrome css html
2 Answers

I know this doesn't answer your main question: "why this behavior changed?".

Just posting another possible solution. Setting flex-basis: 0; for the image element worked for me. 

.insurance {
    width: 100%;
    max-width: 150px;
    flex-basis: 0;
}
user_21987980
user_13059070
Related