How to force child div to be 100% of parent div's height without specifying parent's height?

Question

I have a site with the following structure:

<div id="header"></div>

<div id="main">

  <div id="navigation"></div>

  <div id="content"></div>

</div>

<div id="footer"></div>

The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.

How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

Answer 1

For the parent: 

display: flex;

You should add some other prefixes as well. For more information refer to this doc: http://css-tricks.com/using-flexbox/.

Note: align-items: stretch; is not needed. Its usage is also for the parent, not children. But, if you want to define children stretching, you can use align-self like this:

.parent {

  background: red;

  padding: 10px;

  display:flex;

}

.other-child {

  width: 100px;

  background: yellow;

  height: 150px;

  padding: .5rem;

}

.child {  

  width: 100px;

  background: blue;

}

<div class="parent">

  <div class="other-child">

    Only used for stretching the parent

  </div>

  <div class="child"></div>

</div>