I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.

An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.

In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.

[JSFiddle code to try in both Chrome and Firefox](http://jsfiddle.net/jpudo5pc/9/)

HTML as follows:

```
<style>
#container {
  height:80px;
  width:100%;
  border:1px solid;
  overflow:hidden;
  resize:vertical;
}

#inner {
  height:100%;
  width:300px;
  border:2px solid red;
  overflow-y:auto;
}

table{
  height:100%;
}
</style>

<div id="container">
<table>
<tr>
  <td>
  <div id="inner">
    Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
  </div>
  </td>
  <td>
  <img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
  </td>
</tr>
</table>
</div>

```

EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV i.e. the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.