CSS height 100% in firefox not working

I have the following HTML and CSS that behaves totally different in Firefox and Chrome. JSFiddle. ``` .container { width: 200px; height: 50px; border: 1px solid black; display: inline-table; } .content { background-color: red; width: 30%; height: 100%; } ``` ``` <div class="container"> <div class="content"></div> </div> <div class="container"> <div class="content"></div> </div> ``` In Chrome it displays correctly but not in Firefox. Chrome: Firefox: By inspecting the content div in Firefox, the height is 0. Why does it work in Chrome and Safari, but not in Firefox? I notice that removing the `display: inline-table` will work but the container div will be stacked instead of inline.