I have the following HTML and CSS that behaves totally different in Firefox and Chrome. 

[JSFiddle](http://jsfiddle.net/yAa3y/9/).

```css
.container {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: inline-table;
}

.content {
  background-color: red;
  width: 30%;
  height: 100%;
}
```

```html
<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:  

![enter image description here](https://i.stack.imgur.com/chiRI.png)

Firefox:  

![enter image description here](https://i.stack.imgur.com/sFF0I.png)

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.