Chrome v75: изображения с максимальной шириной растянуты внутри гибкого столбца

Question

Начиная с более новой версии Chrome (75.0.3770.80), несколько изображений на моем сайте растягиваются.

Эти изображения в div, со следующими свойствами:

<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;
}

До сегодняшнего дня все работало отлично, но с новой версией Chrome мои изображения растягиваются!

Я попробовал более старую версию Chrome, все было в порядке, поэтому я обновил ее до новой: те же результаты, растянуты.

Мое решение - обернуть мой тег img в div. Но мне любопытно узнать, почему это поведение изменилось.

Спасибо! :)

Answer 1

Поскольку вычисление гибкого базиса изменилось:

https://chromium.googlesource.com/chromium/src/+/3ed97a76cfe8dd422770bcc3b62851333a18ed32

, чтобы исправить эту ошибку:

https://bugs.chromium.org/p/chromium/issues/detail?id=958802

Answer 2

Я знаю, что это не отвечает на ваш главный вопрос: «почему это поведение изменилось?».

Просто опубликовать другое возможное решение.Установка flex-basis: 0; для элемента изображения сработала у меня.

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