Заполните оставшееся пространство после изменения размера изображения, сохраняя его пропорции

Question

У меня есть 2 div, содержащие изображение (400x600), размер которого будет соответствовать размеру div с сохранением соотношения сторон. Другая панель должна заполнить оставшееся пространство. Когда размер области просмотра изменяется, изображение изменяется в соответствии с ожиданиями, но изгиб не заполняет оставшееся пространство. Как я могу изменить flexbox, чтобы заполнить оставшееся пространство? Этот GIF показывает проблему:

Это то, что я получил, но я просто не могу понять, как заставить больший div заполняться, когда изображение уменьшается. По сути, мне нужна панель-2, чтобы заполнить пустоту, которая создается при уменьшении изображения. Так что между двумя панелями нет места.

body {
  background-color: #afafaf;
  margin: 0;
  padding: 0;
}

.container {
  background-color: #fff;
  height: 100vh;
  display: flex;
}

.img-scaleing {
  max-width: 100%;
  max-height: 100%;
}

.panel1 {
  background-color: #b7d1d4;
}

.panel2 {
  flex: 100%;
  background-color: #a493c3;
}

<div class="container">
  <div class="panel1">
    <img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-scaleing" />
  </div>
  <div class="panel2"></div>
</div>

Codepen: https://codepen.io/anon/pen/oRmJZx

Answer 1

Ваша проблема в том, что вы используете vh, а не устанавливаете высоту документа HTML

 html{
  height:100%;
}
body {
  background-color: #afafaf;
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  background-color: #fff;
  height: 100%;
  display: flex;
}

.img-scaleing {
  max-height: 100%;
}

.panel1 {
  background-color: #b7d1d4;
  height:100%;
}

.panel2 {
  flex: 100%;
  background-color: #a493c3;
}

Должно работать.

Answer 2

Вам нужно использовать flex-grow

body {
  background-color: #afafaf;
  margin: 0;
  padding: 0;
}

.container {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.img-scaleing {
  max-width: 100%;
  max-height: 100%;
}

.panel1 {
  background-color: #b7d1d4;
}

.panel2 {
  flex-grow: 1;
  background-color: #a493c3;
}

<div class="container trimed-content">
  <div class="panel1">
    <img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-scaleing" />
  </div>
  <div class="panel2"></div>
</div>

Answer 3

Напишите масштабирующий CSS .img с обычными height и width. Установите это значение на 100%, чтобы оно занимало все panel-1 (или какой-либо другой контейнер).

   body {
      background-color: #afafaf;
      margin: 0;
      padding: 0;
    }
    .container {
      background-color: #fff;
      height: 100vh;
      display: flex;
    }
    .img-scaleing {
    width: 100%;
      height: 100%;
    }
    .panel1 {
      background-color: #b7d1d4;
    }
    .panel2 {
      flex: 100%;
      background-color: #a493c3;
    }

<div class="container trimed-content">
  <div class="panel1">
    <img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-scaleing" />
  </div>
  <div class="panel2"></div>
</div>