Image max-width property causing unexpected behavior

Question

The image is getting shrunk though both of them are inline element. Why setting the max-width: 100%; of the image is having the image to shrink but taking proper width otherwise.

As far as I understand-

No word-break is having precedence over the image width.
When I am setting the max-width property of the image, is the browser thinking I am telling it to shrink the image to fit into its container width set explicitly?

Codepen link: https://codepen.io/rpmcmurphy/pen/zYYoxjj

.ola {
  display: flex;
  width: 110px;
  background: red;
}

a {
  text-decoration: none;
}

a:first-child {
  color: black;
  background: yellow;
}

img {
  height: 30px;
  width: auto;
  max-width: 100%;
}

a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
  <a href="#">
    <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
  </a>
  <a href="#">HelloWorld</a>
</div>

Temani Afif · Accepted Answer · 2019-10-18T21:46:05.940

here you are facing a complex case of min-width constraint. If you look closely you will see that you are having an overflow (if we ommit the max-width)

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
 /* max-width: 100%;*/
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

Your elements won't shrink because they cannot do past their content size. By adding max-width:100% you are changing this behavior. The precentage need to consider the parent width and the parent width depend on its content where you are applying the max-width. You have a kind of cycle here.

To better understand what is happening remove the min-width constraint and you will see that the image is overflowing the a element

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
  min-width:0;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
 /* max-width: 100%;*/
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

Then if you add the max-width the image will logically shrink to avoid the overflow:

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
  min-width:0;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
  max-width: 100%;
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

Now the min-width:0 become useless because the width of the image causing that constraint is now having its own constraint making it smaller enough to avoid having the intial overflow of a (I know, it's also confusing for me...)

That's why you think max-width is telling the browser that the image should shrink:

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
  max-width: 100%;
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

You will have the same result if you consider width:100%.

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
}
.ola a:first-child img {
  height: 30px;
  width: 100%;
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

To get more details about how the browser handle such cases you can refer to the specification: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

It's not trivial at all as you also need to consider flexbox algorithm and how width of replaced element is calculated. I tried to give the most simplified explanation based on what I understand from this behavior (probably not the most accurate one)

one supplementary question, why min-width: 0; is causing the image to get to its full-width? Shouldn't it get truncated (cut into the content)? In the inspect-element I see the image is bleeding through the edge and into the sibling a.But the parent a of the image is truncated though. — RP McMurphy, Oct 19 '19 at 09:39
@RPMcMurphy the min-width:0 on the `a` is allowing the `a` to shrink in order to fit the width of its parent regardless of its content. In such case, the `a` will not care about the image inside and will shrink (not truncated) then the image inside will keep it's initial/default width of 50px and will overflow the `a` — Temani Afif, Oct 19 '19 at 09:42

Image max-width property causing unexpected behavior

1 Answers1