div overflow issue when nested in table cell (firefox) - html

Question

THIS IS THE FIDDLE
HTML:
<input id="APP" type="button" value="Append"/>
<div id="wrapper">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%; height: 30px; background-color: rgb(230,230,230)">
</td>
</tr>
<tr>
<td style="height: 100%;" align="center">
<div id="ContentWrapper">
</div>
</td>
</tr>
</table>
</div>
CSS:
#wrapper{
width: 80%;
height: 300px;
background-color: rgb(25,25,25);
}
#wrapper table{
width: 100%;
height: 100%;
}
#wrapper table td{
vertical-align: middle;
}
#ContentWrapper{
width: 98%;
height: 95%;
border: 1px solid blue;
color: rgb(255,255,255);
text-align: left;
overflow-y: auto;
}
jQuery:
$("#APP").on("click",function(){
$("#ContentWrapper").append("Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>");
});
If you test this in Chrome or any other browser you'll see that it works as it should. But in Firefox, if you keep pressing the "Append" button, the div's height will change with the content despite of the fact that the div's overflow is set to auto.
I know this would work if I would set the div's dimensions in px instead of percentage, but I don't want to do that. I made that fiddle as an example to pinpoint the issue but in my original code the wrapper that holds the table is responsive and I have to keep the dimensions in percentage.

Answer 1

Interesting find. It smacks of a bug in Firefox.
However, there is a workaround: assign an explicit height to the tbody in the table as well.
#wrapper table, #wrapper tbody {
width: 100%; height:100%;
}
See updated fiddle. Note that I also changed some other properties, because the browsers got confused by the top td being 30px high and the bottom one 100%. I changed that to 10% and 90%; you may have to use other values in your situation. (Maybe use calc(...) for one of them.)