Why does display: table behave differently in Firefox and in Chrome?

Question

I'm making a layout that looks kind of like this

All contained withing a 'table' (display: table)
 __________________
| S| HEADER        |
| I|---------------|
| D|               |
| E| CONTENT       |
|  |_______________|
|  |FOOTER         |
--------------------

SIDE is a table-cell and HEADER, CONTENT, FOOTER are contained within another table-cell. CONTENT is a div that has overflow-y set to auto, and in Chrome, whenever the content in CONTENT exceeds the initial height, the scrollbar appears and the whole table isn't resized vertically, however, in Firefox, the whole table IS getting expanded vertically, which is not the behavior I expected.

My table has the table-layout: fixed property and overflow: hidden. Is there anyway I can prevent the table from expanding vertically in Firefox?

Answer 1

mention some height

<td>
<div style="height:200px;
overflow:hidden;">
contents goes here
</div>
</td> 

adjust the height, it should cut off the extra lines out from your sight