html - 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 prefixes, http://css-tricks.com/using-flexbox/.

As @Adam Garner noted, align-items: stretch; is not needed. Its usage is also for parent, not children. If you want to define children stretching, you use align-self.

.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>