How To Get The Content Of The Bottom Element Of A Flexbox To Be 100% Height Its Container

If I make a flexbox with 2 children and column flow and set the second child to flex-grow 1 the second child expands to fill the flexbox. This works (ps: Didn't want to clutter th

Solution 1:

Flex has a quirk where you need to set the height to 0.

Change the #bottom rule's height property to this height: 0;

For the inside to work I changed it to "position: absolute" and as well added a position:relative to the bottom

Update

If you don't want to use absolute position, you can set these 2 css rules like this:

(Note though, that this propagates the original issue if a new inner div is used like the first one)

#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
  display: flex;
}
#inside {
  background-color: green;
  flex: 1 0 auto;
}

Sample using "position: absolute"

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
}
#inside {
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (would not scroll if working)</div>
  </div>
</div>

Solution 2:

How do I get #bottom to stretch to fit the flexbox and also get a the child #inside to be 100% height of its container #bottom?

Just add two lines of code to the CSS.

CSS

#bottom {
    background-color: blue;
    flex: 1 0 auto;
    display: flex; /* NEW */
}

#inside {
    flex: 1; /* NEW */
    background-color: green;
}

DEMO: http://jsfiddle.net/wf2L8dse/

Here's what's happening:

You have a flex container (#outer) with two flex items (#top and #bottom).

#outer is in column alignment.

#bottom has flex: 1 (i.e., flex-grow: 1), so it occupies all available height in the container.

A new element (#inside) is made a child of #bottom and must occupy the same height as parent.

Answer :

Make #bottom a (nested) flexbox. This activates default flex rules.

One such rule is align-items: stretch, which tells flex items (#inside) to stretch the full height of their container. (Height, in this case, because the flex-direction is row, by default.)

Then apply flex: 1 (or flex-grow: 1) to #inside, so it expands the full width of the container.

---

Addressing the height: 100% issue

I'm not sure there's anything wrong with your code. You have applied height: 100% to #inside and, as required by the spec when using percentage heights, specified a height for all parent elements including body and the root element (html).

The only thing you may want to consider (to remove the vertical scrollbar on the browser window), is applying overflow: hidden to body.

DEMO: http://jsfiddle.net/wf2L8dse/1/