Свойство максимальной ширины изображения, вызывающее неожиданное поведение

Question

Изображение сжимается, хотя оба они являются встроенными элементами. Почему настройка max-width: 100%; изображения приводит к уменьшению изображения, но требует правильной ширины в противном случае.

Насколько я понимаю -

1. Никакой перенос слов не имеет приоритета надширина изображения.
2. Когда я устанавливаю свойство max-width изображения, браузер думает, что я говорю ему уменьшить изображение, чтобы оно вписывалось в явно заданную ширину контейнера?

Кодовая ссылка: 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>

Answer 1

здесь вы сталкиваетесь со сложным случаем min-width ограничения . Если вы посмотрите внимательно, вы увидите, что у вас переполнение (если мы опускаем 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>

Ваши элементы не будут уменьшаться, потому что они не могут превышать размер своего содержимого. Добавляя max-width:100%, вы меняете это поведение. Преимущество должно учитывать ширину родительского элемента, а ширина родительского элемента зависит от его содержимого, к которому вы применяете max-width. Здесь у вас есть своего рода цикл.

Чтобы лучше понять, что происходит, удалите ограничение min-width, и вы увидите, что изображение переполняет элемент a

.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>

Тогда, если вы добавите 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;
  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>

Теперь min-width:0 становится бесполезным, потому что ширина изображения, вызывающего это ограничение, теперь имеет свое собственное ограничение, которое делает его достаточно маленьким, чтобы избежать первоначального переполненияиз a (я знаю, это также сбивает меня с толку ...)

Вот почему вы думаете, 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>

У вас будет тот же результат, если вы рассмотрите 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>

Чтобы получить более подробную информацию о том, как браузер обрабатывает такие случаи, вы можете обратиться к спецификации: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

Это не тактривиально, так как вам также необходимо учесть алгоритм flexbox и рассчитать ширину заменяемого элемента. Я попытался дать наиболее упрощенное объяснение, основанное на том, что я понимаю из этого поведения (вероятно, не самое точное)