Overflowing on Firefox and IE9+ - css

Question

I have a red div at a fixed position : top and bottom are fixed.
This div contains a table in which a cell contains a scrollable div, so that the content can't overflow the red div.
It looks like this on Chrome :
But on Firefox, the content grows and overflows out of the red box :
Here's my HTML :
<div id=a>
<div id=b>
<table id=c border=1>
<tr><th height=20 width=20>
<input type=button id=but value="Fill cell">
</th><th>A</th></tr>
<tr><th>dataname</th>
<td><div id=val class=scrollable>cell content</div></td>
</tr>
</table>
</div>
</div>
and the CSS :
#a {
position:fixed; top:20px; left:20px; bottom:50px;width:200px;
background:red;
}
#b { height:100%; }
#c { width:100%; height:100%; }
.scrollable {
width:100%; height:100%;
overflow-y:auto;
}
And here's a fiddle for the tests : http://jsfiddle.net/xusqc/
I'd suggest you test your proposal on FF before submitting an answer.
How could I fix my code to have on Firefox and IE9+ the behavior I have now on Chrome ?
Note that the height of the first line of the table may change dynamically in my application. And the solution must be applicable if my data table has more rows and cells.

Answer 1

As I couldn't find a cross-browser pure HTML/CSS solution, I had to use some JavaScript (and jQuery but it could have been done without it if I hadn't many event handlers bound with jQuery in my cells).
The idea is to empty the cells containing a .scrollable div, compute their heights, refill the cells then set the heights as fixed.
Here's the function I wrote :
function resetScrollableHeights(){
$sp = $('.scrollable').closest('td'), heights = [], contents = [];
$sp.each(function(){
$(this).css('height', 'auto'); // without this, window shrinking would be badly handled
contents.push($('.scrollable', this).detach()); // let's empty all scrollables
});
$sp.each(function(){ //now store the heights
heights.push($(this).height());
});
$sp.each(function(){ // refill the scrollables and fix the heights
$(this).append(contents.shift()).css('height', heights.shift());
});
}
The function is called when the window is resized :
$(window).resize(resetScrollableHeights);
And it must also be called when the content of a .scrollable div changes.
I tested it on Chromium/Ubuntu, Chrome/Android, Firefox/Ubuntu and IE9/Win7. As it's useless on WebKit based browsers where I hadn't any bug with pure HTML/CSS it could be deactivated with some detection but I prefer my code to be free from browser detection.
Demonstration

Answer 2

Change the <td> to <td class="scrollwrap">, the one that contains your target div.
Update your CSS:
:
.scrollwrap { position:relative; }
.scrollable {
position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0;
overflow:auto;
}
But be aware:
height:100% only works when parents also have a specific height, doesn't always work with calculated heights;
when using left&right or top&bottom on position:absolute elements, some browsers can't calculate width & height
overflow-y or overflow-x have some usage limitations.