Image max-width property causing unexpected behavior

user_5842235 0
Viewed 79

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-

  1. No word-break is having precedence over the image width.
  2. 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>

flexbox css
1 Answers

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)

user_86203330
Related