Разделите изображение, не изменяя его размер во flexbox

Question

Я пытаюсь заставить изображения в flexbox правильно увеличивать размер, что они и делают. Однако эти изображения имеют наложение , поэтому я создаю div, в котором находятся изображение и наложение. Однако этот div неправильно масштабируется с изображениями . Это выглядит так: (я добавил светло-синий цвет фона для одного из элементов div для демонстрационных целей).

Все это внутри содержащий див. HTML и CSS выглядят так:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.imagecontainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
}

<div class="container">
  <div class="imagecontainer">
    <img src="image" class="image">
    <img src="overlay" class="image">
  </div>
  <div class="imagecontainer">
    <img src="image2" class="image">
    <img src="overlay2" class="image">
  </div>
</div>

Теперь мой вопрос: как мне получить ширину imagecontainer, равную ширине изображений внутри нее? Я пробовал множество вещей, но, похоже, ничего не работает так, как я хочу ..

Заранее спасибо!

Answer 1

Надеюсь, что следующее поможет. Я удалил position: absolute; из первого изображения в .imagecontainer, чтобы это изображение не вынималось из обычного потока макетов. Также удалено width: 100%; из .imagecontainer.

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.imagecontainer {
    position: relative;
    height: 100%;
}

.image, .overlay {
    max-height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
}

<div class="container">
  <div class="imagecontainer">
    <img src="image.jpg" class="image">
    <img src="overlay.jpg" class="overlay">
  </div>
  <div class="imagecontainer">
    <img src="image2.jpg" class="image">
    <img src="overlay2.jpg" class="overlay">
  </div>
</div>

Answer 2

Вместе с ответом @ MrSegFaulty мне дополнительно пришлось добавить height: max-content в класс container и указать max-width: 100% для изображения и оверлея. Конечный результат выглядит так:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: max-content;
}

.imagecontainer {
    position: relative;
    height: 100%;
}

.image, .overlay {
    max-height: 100%;
    max-width: 100%
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
}

<div class="container">
  <div class="imagecontainer">
    <img src="image.jpg" class="image">
    <img src="overlay.jpg" class="overlay">
  </div>
  <div class="imagecontainer">
    <img src="image2.jpg" class="image">
    <img src="overlay2.jpg" class="overlay">
  </div>
</div>