Как задать ширину div, чтобы она была такой же, как общая ширина вложенных в него изображений?

Question

Есть 2 изображения, помещенных в контейнер div. Нужно, чтобы ширина контейнера была равна сумме ширины вложенных в него изображений.

.block {
  border: 1px solid orangered;
  display: block;
  max-width: max-content;
  text-align: justify;
}

<div class="block">
  <img src="cards1.jpg">
  <img src="cards2.png">
</div>

получается что-то подобное:

Answer 1

Использовать display: inline-block;

.block {
  border: 1px solid orangered;
  display: inline-block;
  max-width: 100%;
}

<div class="block">
  <img src="cards1.jpg">
  <img src="cards2.png">
</div>

Или display: inline-flex.

.block {
  border: 1px solid orangered;
  display: inline-flex;
  max-width: 100%;
}

<div class="block">
  <img src="cards1.jpg">
  <img src="cards2.png">
</div>