Extreme tall elements glitch - html

Question

I try to make infinity scroll table with only currently visible items rendered in HTML. But with some millions of entries I encountered glich in rendering extreme tall placeholders for unloaded data.
I tried this with div elements and HTML tables too but with similiar glitch.
Please use Chrome to reproduce the problem. With Firefox is problem too but it behaves differently.
Here is minimal example code:
https://jsfiddle.net/bj0tmh2r/
<style>
.row {
border-bottom: 1px solid #f00 !important;
}
</style>
<div class="table-responsive" style="max-height: 600px;">
<div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #f00;height: 33100000px;">
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #0f0;height: 299px;">
</div>
</div>
</div>
If you scroll to last .row elements, you can see missing bottom red borders between rows.
Why this happens. How to avoid it?