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:

  

  <         


        
      

Answer 1

For the parent:

display: flex;

You should add some prefixes, http://css-tricks.com/using-flexbox/.

Edit: 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;
}

  

    Only used for stretching the parent