Flexbox stretching image horizontally

Question

I'm running into a weird inconsistency with an image on my website. It's structured like this:

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

After a hard reload in Chrome 74, it renders like this (wrong):

But then if I inspect element and toggle any of the img's properties off and on again, it renders like this (correct):

I've come across this question, which suggested adding align-self: center; to the img, but that hasn't helped.

You can see the issue live here: https://leonoverweel.com/. Any idea what the problem is?

make the image inside a div ..there is some known issue when image is a flex item — Temani Afif, May 26 '19 at 10:52
Does adding `flex-shrink: 0` to the `.intro>img` css rule fix the problem? — Piotr Wicijowski, May 26 '19 at 15:59
That seems to fix it @PiotrWicijowski, thanks. I've added it as answer. — Leon Overweel, May 28 '19 at 06:25
Glad I could help. Anyway, this behavior seems to me like a bug in Chrome, but having such a safeguard in your css will not hurt. — Piotr Wicijowski, May 28 '19 at 06:59

score 0 · Accepted Answer · answered May 28 '19 at 06:25

0

Adding flex-shrink: 0 to .intro>img seems to fix this, as per Piotr's comment.

answered May 28 '19 at 06:25

Leon Overweel

1,488
4
17
27

Flexbox stretching image horizontally

1 Answers1