Изображение предотвращает растяжение гибкого элемента до нижней части экрана

Question

Я пытаюсь определить макет из двух столбцов, используя flexbox, где первый столбец имеет изображение, а оба столбца имеют разные цвета фона. Я бы хотел, чтобы обе колонки простирались до нижней части окна.

Однако я получаю пробел в нижней части правого столбца всякий раз, когда я изменяю размер окна браузера до достаточно низкой высоты.

Вот пример поведения. В этом случае я бы хотел, чтобы красная колонка расширялась до самого нижнего края экрана.

Есть предложения как это исправить? Я бы не хотел слишком сильно растягивать изображение.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%;
}

.right {
  background: lightcoral;
  flex: 1;
}

<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>

Answer 1

Снятие установленной высоты для тела / роста позаботится об этом.

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%
}

.right {
  background: lightcoral;
  flex: 1;
}

<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>

Answer 2

Используйте min-height: 100vh; для класса контейнера, чтобы он не уменьшался, когда высота окна меньше высоты изображения

html,
body {
  height: 100vh;
  max-height:100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%;
}

.right {
  background: lightcoral;
  flex: 1;
}

<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>

Надеюсь, это поможет