Why does percentage `max-width` behave differently on `img` compared to other elements like `div` (inside flex/grid container)?

Question

Below I have two versions of a simple flex container:

The first one contains an img.
The second one contains a div.

Both the img and div have exactly the same styles, which includes max-width: 100%.

For some reason, the behaviour of this percentage max-width style is inconsistent.

Why does the percentage max-width style behave differently on the img compared to the div?

Side note: the same happens when I use display: grid instead of display: flex.

.wrapper {
    width: 300px;
    border: 1px solid;
}

.container {
    display: flex;
}

.img {
    width: 600px;
    max-width: 100%;
    height: 100px;
    background-color: lightGrey;
}

<div class="wrapper">
    <h2>img</h2>
    <div class="container">
        <div class="content">
            <img class="img" />
        </div>
    </div>
    <h2>div</h2>
    <div class="container">
        <div class="content">
            <div class="img"></div>
        </div>
    </div>
</div>

I understand I can make the div behave like the img by adding this style:

.content {
    min-width: 0;
}

However I am keen to understand why the behaviour is inconsistent in the first place.

they are not exactly the same. img is a *replaced element* which makes the difference here — Temani Afif, Nov 15 '20 at 15:05
Is there something in the spec that states that `max-width` should be calculated differently for replaced elements? — Oliver Joseph Ash, Nov 15 '20 at 15:07
^ it may not look the same as yours at first glance but it's the same because in your case a flex item will have its width depend on it's content (like an inline-block, float, etc) so the same explanation apply here. — Temani Afif, Nov 15 '20 at 15:14

Why does percentage `max-width` behave differently on `img` compared to other elements like `div` (inside flex/grid container)?

0 Answers0