Child in flexbox is making parent larger than it should be

Question

I have a simple flexbox, in a column layout, as follows. I want the two div.small elements to take up some space, and the div.rest element to take up the rest. This works as expected in the following example:

.vertical-stack {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.small {
  background: red;
}

.rest {
  background: green;
  flex: 1;
}

<div class="vertical-stack">
  <div class="small">
    First
  </div>
  <div class="small">
    Second
  </div>
  <div class="rest">
    This fills the rest of the vertical space
  </div>
</div>

However, if I try to put an img into the last element: div.rest it makes the vertical-height for the element much larger than I want it to be - and the parent no longer takes up the rest of the space. I've tried setting max-height: 100%, height:100% to the img, and even align-items:stretch onto div.rest, but these don't seem to be working.

<div class="vertical-stack">
  <div class="small">
    First
  </div>
  <div class="small">
    Second
  </div>
  <div class="rest">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.mordeo.org%2Ffiles%2Fuploads%2F2020%2F05%2FCute-Husky-Puppy-4K-Ultra-HD-Mobile-Wallpaper.jpg&f=1&nofb=1" />
  </div> 
</div>

JSFiddle is available here: https://jsfiddle.net/7ucgsvkL/2/

Child in flexbox is making parent larger than it should be

0 Answers0