100% height divs

Question

I feel really stupid for not seeing whats wrong here.

Basically three divs in a row with a container - want all of them to be as high as the container.

Here's a reduced test case:

http://codepen.io/jgclifton/full/mDdpv

Any ideas?

Answer 1

Container has height: auto; If you change it to height: 100px; for exemple, every divs have same height to me.

Answer 2

Give div.container an explicit height, and your divs will line up perfectly. Currently, it has a height of auto, meaning that using height: 100% on the child elements has no effect. Setting a height of, say, 200px on the container gives the percentage-based height something to use as a reference.