How to get the content of the bottom element of a flexbox to be 100% height its container

Question

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

(p

Answer 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;
}

  
top
  

    
inside (would not scroll if working)