Это работает, как и ожидалось, на 30 строках, но увеличивает высоту блока более чем на 50% после вставки, например. 100 строк в него. Кто-нибудь может объяснить, что происходит? Я заметил эту ошибку только в FF.
<!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>