can anyone please explain, why is the first example faster when scrolling downthan the second one? Seems like the 2nd example is re-rendering the rows as I scroll down.
It's only noticeable when you grab the scroll handle and scroll the table way down to the bottom. In example #2 you should see white stripes / or empty space in the lower part of the table.
The only difference between these two, is the "height" property in container.
Example 1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex Grid with Floating Header</title><style> .container { display: flex; flex-direction: column; overflow: auto; height: 90vh; } .header { display: flex; position: sticky; top: 0; background-color: #f1f1f1; z-index: 1; } .header div { flex: 1; padding: 10px; border: 1px solid #ccc; text-align: center; } .grid { display: flex; flex-direction: column; } .row { display: flex; } .row div { flex: 1; padding: 10px; border: 1px solid #ccc; text-align: center; } .header div:first-child, .cell:first-child { color: white; }</style></head><body><div class="container"><div><div><div class="header"><script> for (let j = 0; j < 50; j++) { document.write(`<div><span> Header ${(j + 1)} </span></div> `); }</script></div><div class="table__body"><div class="rows"><!-- Generate 1000 rows --><script> for (let i = 1; i <= 2000; i++) { document.write('<div class="row">'); for (let j = 1; j <= 60; j++) { document.write('<div>Row '+ i +' Col '+ j +'</div>'); } document.write('</div>'); }</script></div></div></div></div></div></div></body></html>Example 2
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex Grid with Floating Header</title><style> .container { display: flex; flex-direction: column; overflow: auto; height: 100%; } .header { display: flex; position: sticky; top: 0; background-color: #f1f1f1; z-index: 1; } .header div { flex: 1; padding: 10px; border: 1px solid #ccc; text-align: center; } .grid { display: flex; flex-direction: column; } .row { display: flex; } .row div { flex: 1; padding: 10px; border: 1px solid #ccc; text-align: center; } .header div:first-child, .cell:first-child { color: white; }</style></head><body><div class="container"><div><div><div class="header"><script> for (let j = 0; j < 50; j++) { document.write(`<div><span> Header ${(j + 1)} </span></div> `); }</script></div><div class="table__body"><div class="rows"><!-- Generate 1000 rows --><script> for (let i = 1; i <= 2000; i++) { document.write('<div class="row">'); for (let j = 1; j <= 60; j++) { document.write('<div>Row '+ i +' Col '+ j +'</div>'); } document.write('</div>'); }</script></div></div></div></div></div></div></body></html>