Fill remaining space after image resize keeping its aspect ratio

Question

I have 2 div’s one containing an image(400x600) that will be sized to the div keeping its aspect ratio. The other panel should fill the remaining space. When the viewport resizes, the image resizes as expected but the flex does not fill the remaining space. How can I change the flexbox to fill the remaining space? This gif shows the problem:

This is what I got to but I just can't figure out how to get the bigger div to fillup when the image scales down. Basically, I need panel-2 to fill the void that is created when the image scales down. So that there is no space between the 2 panels.

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

Your issue is that you are using vh and not setting the height of the HTML document

 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;
}

Should work.