Image in flexbox, 100% height is too large

Question

I realize there are other similar questions and I apologize if this has been answered, but I haven't been able to discern a solution to my question.

https://codepen.io/benrhere/pen/GRoLqPK

div {
  height: 300px;
  background-color: green;
  display: flex;
  border-style: dotted;
  flex-direction: column;
}

img {
  height: 100%;
  object-fit: contain;
}

h4 {
  width: 100%;
}

<div>
  <h4>Headline inside of flexy</h4>
  <img src="https://loremflickr.com/400/300" alt="image placeholder for a thumb that's supposed to present a featured work" class="work-thumb">
</div>

I want the image to be within the flexbox border. When I set the height of the image to 100%, it correctly sets it to the height of the parent box. But I need to account for the height of the first sibling in the div (the headline). Right now, I'm getting this:

It's nearly always better to wrap flexbox images in their own div. — Paulie_D, Jul 25 '20 at 21:59

Mithun Das · Accepted Answer · 2020-07-25T22:15:03.383

1

You used a fixed height but your contain image is bigger than that. you can use both solutions.

div {
      min-height: 300px; /* or height:100%; */
      background-color: green;
      display: flex; 
      border-style: dotted;
      flex-direction:column;
}

please let me know if anything unclear to you.Happy Coding!!!

Reference: https://codepen.io/Mithunjack/pen/QWyPEep

edited Jul 25 '20 at 22:15

answered Jul 25 '20 at 22:10

Mithun Das

435
4
8

1

Thanks! Worked like a charm. It's counter intuitive to me that by setting a min height, the resulting height could actually be smaller, but that seems to be the case. I'm going to read through that other post to try to make better sense of that. – BenjiFB Jul 25 '20 at 23:30
You welcome mate. – Mithun Das Jul 25 '20 at 23:36

score 1 · Answer 2 · answered Jul 25 '20 at 22:20

1

edit , see the duplicate for explanations

You may also set a min-height (or overflow:hidden) on the img , so the browser recalculate the max size it can be to remain inside it's flex parent.

div {
  height: 300px;
  background-color: green;
  display: flex;
  border-style: dotted;
  flex-direction: column;
}

img {
  min-height:0;/* or 
  overflow:hidden ;
  ...  if thats speaks to you better */
  object-fit: contain;
}

<div>
  <h4>Headline inside of flexy</h4>
  <img src="https://loremflickr.com/400/300" alt="image placeholder for a thumb that's supposed to present a featured work" class="work-thumb">
</div>

answered Jul 25 '20 at 22:20

G-Cyrillus

101,410
14
105
129

Thanks! That's helpful. As I wrote on the other response, it's counter intuitive to me that by setting a min height, the resulting height could actually be smaller, but that seems to be the case. I appreciate the response. – BenjiFB Jul 25 '20 at 23:30
@BenjiFB if the img is not tall enough, add `flex-grow:1;` to the rules of ìmg`, it will expand it to the bottom if it is shorter. – G-Cyrillus Jul 26 '20 at 11:10

score 0 · Answer 3 · answered Jul 25 '20 at 22:13

0

The image is longer than its parent (div element). You can either set a max-height for the img (as in the snippet) or add height: fit-content; to the div style.

div {
      height: 300px;
      background-color: green;
      display: flex;
      border-style: dotted;
      flex-direction: column;
    }

    img {
      margin: 0 auto;
      max-height: 240px;
    }

<div>
      <h4>Headline inside of flexy</h4>
      <img src="https://loremflickr.com/400/300" alt="image placeholder for a thumb that's supposed to present a featured work" class="work-thumb">
    </div>

answered Jul 25 '20 at 22:13

Mobina

6,369
2
25
41

This solution didn't seem to work for me. Setting min-height, instead of max-height, did tho. – BenjiFB Jul 25 '20 at 23:31
1

Thank you for the answer, though. – BenjiFB Jul 25 '20 at 23:46

Image in flexbox, 100% height is too large

3 Answers3