Flexbox растягивает изображение по горизонтали

Question

У меня странное несоответствие с изображением на моем сайте. Это структурировано так:

<div class="intro">
    <div>
        <p>Some text</p>
        <p>More text</p>
    </div>
    <img src="images/headshot.jpg" />
</div>

.intro {
    display: flex;
    align-items: center;
}

.intro>img {
    width: 11rem;
    height: 11rem;
    border-radius: 6rem;
    margin: 1rem 0;
    align-self: center;
}

.intro>div {
    padding-right: 1rem;
}

После сложной перезагрузки в Chrome 74 он выглядит так (неправильно):

Но тогда, если я проверяю элемент и выключаю и снова включаю любое из свойств img, он будет выглядеть так (правильно):

Я встречал этот вопрос , который предлагал добавить align-self: center; к img, но это не помогло.

Вы можете увидеть проблему в прямом эфире здесь: https://leonoverweel.com/. Есть идеи, в чем проблема?

Answer 1

Добавление flex-shrink: 0 к .intro>img, кажется, исправляет это, согласно комментарию Piotr .