Keep image within parent that has no explicit height

I have a page set up as shown in the code below, with a couple of nested flexboxes. The flex-col div has 2 children, header and content. I would like the content box to take up all remaining space of the flex-col div, and the image inside of content to not be taller than that. Currently, the image fits the width properly, but just retains its aspect ratio so on different window sizes the image will extend over the footer.

Here is a jsfiddle, and here is the code:

<div>
  <div class="non-footer">
    <div class="flex-col">
      <div class="header">
        Header Text
      </div>
      <div class="content">
        <img class="left" src="https://dummyimage.com/400x300.png" />
        <div class="right">
          I don't care if this content overflows into the footer. The image, however, should be letterboxed (object-fit: contain).
        </div>
      </div>
    </div>
  </div>
  
  <div class="footer">
    This is the footer area
  </div>
</div>

.flex-col {
  display: flex;
  flex-direction: column;

}

.non-footer {
  height: 200px;
  max-height: 200px;
}

.header {
  background-color: blue;
  font-size: 40px;
}

.content {
  display: grid;
  grid-template-columns: 70% 1fr;
  gap: 8px;
  margin: 8px;
}

.content .left {
  width: 100%;
  /* height: 100%; */
  object-fit: contain;
}

.content .right {
  background-color: green;
}

.footer {
  background-color: blue;
  color: aliceblue;
}

Note: You can see when making the window width a lot smaller, the image fits in as is wanted. With a wider window, the image grows too big

Is there a way to do this without an explicit height set on the content div?

I am aware of 2 possible solutions, which I would like to avoid if possible:

1. Set the image as a background-image in css and use background-size: contain
2. Calculate the height of the header and then use math to calculate the expected height of the content div (non-footer height - header height)