Image inside a flex item with flex-direction:column increases the parent's height

Question

I'm creating a layout that should take the full screen height and contain three parts:

paragraph of one to several lines
image
bottom panel

The space remaining after the paragraph is layed out should be divided between image and bottom panel, with image taking 3x height of the panel.

I've started with a flexbox layout:

<!doctype html>
<html>
    <head>
        <style>
            * { margin: 0; padding: 0 }

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

            .Parent > div {
                border-radius: 4px;
                border: 1px solid black;
                margin-bottom: 0.5rem;
                padding: 0.5rem;
            }

            .paragraph {
                background: pink;
            }

            .flex-smaller {
                flex: 1;
                background: lightblue;
            }

            .flex-bigger {
                flex: 3;
                background: lightgreen;
            }

            .flex-bigger img {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="Parent">
            <div class="paragraph">one paragraph</div>
            <div class="flex-bigger">
                <img src="http://placehold.it/300x800"/>
            </div>
            <div class="flex-smaller">
                Boudin filet mignon bacon short ribs shank beef ribs. Ground round landjaeger buffalo corned beef turkey tenderloin, beef ribs flank prosciutto doner
            </div>
        </div>
    </body>
</html>

And when there is no image, it looks correctly. When the image is smaller than the available space, it stretches to 100% of the container height as expected. However, if the image is bigger than the available space, it doesn't scale down: instead it increases the height of the container, and the whole page becomes higher than 100vh. How can I make the image scale down to fill the height of the container?

G-Cyrillus · Accepted Answer · 2020-02-03T18:55:16.000

You can use overflow:hidden or min-height:0; to force height calculation and a reflow . so the container doesn't expand from its content over the room it is supposed to be . height:XX% then can be used

full explanation here : Why don't flex items shrink past content size?

example

* {
  margin: 0;
  padding: 0
}

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

.Parent>div {
  border-radius: 4px;
  border: 1px solid black;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.paragraph {
  background: pink;
}

.flex-smaller {
  flex: 1;
  background: lightblue;
}

.flex-bigger {
  flex: 3;
  background: lightgreen;
/* reflow */
  min-height: 0; /* or  
  overflow:hidden; if not to be used otherwise */
}

.flex-bigger img {
  height: 100%;
}

<div class="Parent">
  <div class="paragraph">one paragraph</div>
  <div class="flex-bigger">
    <img src="http://placehold.it/300x800" />
  </div>
  <div class="flex-smaller">
    Boudin filet mignon bacon short ribs shank beef ribs. Ground round landjaeger buffalo corned beef turkey tenderloin, beef ribs flank prosciutto doner
  </div>
</div>

If image has to be a mimimal height, overflow:auto can be used.

* {
  margin: 0;
  padding: 0
}

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

.Parent>div {
  border-radius: 4px;
  border: 1px solid black;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.paragraph {
  background: pink;
}

.flex-smaller {
  flex: 1;
  background: lightblue;
}

.flex-bigger {
  flex: 3;
  background: lightgreen;
/* reflow */
   
  overflow:auto;
 
}

.flex-bigger img {
  height: 100%;
  min-height:400px; /* demo purpose */
  vertical-align:top;
}

<div class="Parent">
  <div class="paragraph">one paragraph</div>
  <div class="flex-bigger">
    <img src="http://placehold.it/300x400" /> I'll be scrolling this time 
  </div>
  <div class="flex-smaller">
    Boudin filet mignon bacon short ribs shank beef ribs. Ground round landjaeger buffalo corned beef turkey tenderloin, beef ribs flank prosciutto doner
  </div>
</div>

Image inside a flex item with flex-direction:column increases the parent's height

1 Answers1