Here is the HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
And here is the CSS:
#inner {
float: left;
height: 100%;
}
Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.
How can I force it to be 100% of the height of the parent div?
For the parent:
display: flex;
You should add some prefixes http://css-tricks.com/using-flexbox/
Edit: Only drawback is IE as usual, IE9 does not support flex. http://caniuse.com/flexbox
Edit 2: As @toddsby noted, align items is for parent, and its default value actually is stretch. If you want a different value for child, there is align-self property.
Edit 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/