How to use object-fit with flex-grow / flex-shrink?

I have two vertically stacked containers (in a fixed size parent container):

• The height of the bottom one is defined by its (text) content.
• The top one takes up the remaining height and contains an image.

The problem is, that object-fit only works as expected for images with landscape proportions (width >= height).

When the image has portrait proportions (height > width), it still uses the width as limiting factor and creates overflow.
I assume that the problem is caused by the absence of specific dimensions for the image container?

JSFiddle example.

.main-container {
  width: 300px;
  height: 300px;
  /* For testing. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#img-slot {
  flex: 1;
  background-color: pink;
}

#img-slot img {
  /* The problem? */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#timer {
  flex: none;
  font-size: 20px;
  text-align: center;
  background-color: skyblue;
}

<div class="main-container">
  <div id="img-slot">
    <img src="https://source.unsplash.com/random/100x150">
  </div>

  <div id="timer">
    <span>01:02:03</span>
  </div>
</div>

What I tried so far:

• height: auto and/or width: auto.
• margin: auto on different elements.
• setting image dimensions via flexbox.
• wrapping img-slot in another div with dimensions width: 100%; height: 100%;.

To paraphrase my question: How do I apply object-fit so that both the width and the height of a growing or shrinking container are taken into account in a flexbox layout? Is this even possible?

In this example I'm trying to maintain the aspect ratio of the image. (If I'm not mistaken, this shouldn't really matter, as it depends on object-fit's value?)