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

Question

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?)

Added `min-height:0;` on `#img-slot` https://jsfiddle.net/fh7uw1r4/ — Rainbow, May 27 '22 at 20:15
+1 Zohini. In general, if your flex items seem too big, try changing `min-height` (or `min-width` for row flexboxes). `min-height/width` defaults to `auto`, which triggers a complicated algorithm for setting the min value: https://drafts.csswg.org/css-flexbox/#min-size-auto Afoeee: did you look in devtools to try to figure out why the image is too big? To be clear, the min-height value isn't exposed there, but if it WERE there, would you have seen it? — dgrogan, May 27 '22 at 21:22
What is it you are trying to do? Make the image scale to fit the height of its container? Do you want to retain the aspect ratio or sacrifice it in order to do so? Or something else? it's unclear exactly what behavior it is you are looking for. — TylerH, May 28 '22 at 00:30
@dgrogan thanks for the clarification. Tbh, I didn't know that devtools can do that, so thanks for this tip as well! — AFoeee, May 28 '22 at 08:51
@TylerH I changed the last paragraph of my question to address your comment. Sorry for the ambiguity. — AFoeee, May 28 '22 at 08:53
@Zohini If you post this as an answer, I would accept it. Thank you! — AFoeee, May 28 '22 at 12:41

score 0 · Answer 1 · answered May 28 '22 at 00:21

Try adding your object fit on the parent with overflow: hidden:

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

#img-slot {
  overflow: hidden;
  background-color: pink;
  object-fit: contain;
}

#img-slot img {
  width: 100%;
  height: 100%;
}

#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>

Sorry, I should have specified that the parent element has a fixed height. This is why the image may be distorted without `object-fit`. My mistake, sorry. — AFoeee, May 28 '22 at 12:38

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

What I tried so far:

1 Answers1