Responsive image in flexbox - with flex-direction:column not behaving as expected

Question

I have some content that I want displayed in the viewport without scrolling. It contains a header, an image and some copy. The copy can be of variable length and must take priority over the image. Flexbox works as intended when flex-direction:row but when I use flex-direction:column the image does not respond in the same way - the image and copy bursts out of the container. As the height is changed, I want the image to shrink, with it's container:

Image of issue

Codepen example

HTML:

<div class="container">
  <div class="card">
    <div class="card-header">
       Spanish Omelette
    </div>
    <div class="image">
      <!-- <img src="https://runnerbeantours.com/wp-content/uploads/2020/04/how-to-cook-spanish-omelette.jpg">-->
    </div>
    <div class="card-content">
      <div class="copy">
        In order to make a perfect spanish omelette, the potatoes needs to be cut into small slices 2 milimeters thick, then clean the potatoes. You will need a lot of practice!
      </div>
    </div>
  </div>
</div>

SASS:

body {
  background:grey;
  padding:15px;
}
.container {
  display:flex;
  justify-content:center;
  align-items: stretch;
}
.card {
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  width:625px;
  background:white;
  padding:15px;
  border-radius:10px;
  height:calc(100vh - 100px);
}

.card-header {
  background:orange;
  flex:0 1 auto;
}
.card-content {
  flex:1 1 auto;
  background:yellow;
  .copy {
      background:yellow;
   }
}
.image {
  flex:0 2 auto;
  background:green;
  padding:10px;
  img {
      width:100%;
      height:100%;
    }
}

Any ideas?

Answer 1

I wouldn't recommend using vw on the parent's div. Smaller screens will look totally different than bigger ones. Also when you set the parent's height to a certain amount, you'll need to specify the inside elements heights as well. This will prevent overflowing. Explanation.

Flex can take care of that.

The only thing you need to do here is telling the image to not overflow.

body {
  background:grey;
  padding:15px;
}
.container {
}
.card {
  display:flex;
  flex-direction:column;
  margin: auto;
  width:625px;
  background:white;
  padding:15px;
  border-radius:10px;
  height:calc(100vh - 100px);
}

.card-header {
  flex: 0 1 1;
  background:orange;

}
.card-content {
  background:yellow;
  flex: 0 1 1;
  .copy {
      background:yellow;
   }
}
.image {
  overflow: hidden;
  background:green;
  padding:10px;
  flex: 0 1 1;
  img {
      max-width: 100%;
      height: 100%;
    }
}