This works as expected on 30 rows but increases block height over 50% after inserting e.g. 100 rows into it. Can anyone explain what happens? I noticed this bug in FF only.
<!DOCTYPE html>
<html style="height:100%;">
<head>
<title></title>
</head>
<body style="height:100%;background:grey;padding:0;margin:0;">
<table style="height:100%;">
<tr>
<td style="height:100%;">
<div style="background:white;height:50%; overflow: auto">
<script>
// try 100 to see a bug
for (i = 0; i <= 30; i++) {
document.write(i + " Sample text<br>");
}
</script>
</div>
<div style="background:blue; height:50%">
Sample text
</div>
</td>
</tr>
</table>
</body>
</html>