I am facing an issue with a scrollable div that contains a table, where I am trying to append a loader component as a child to cover the div when it's scrolled. However, the loader only covers the initial size of the div.
Here is an example similar to my situation (codepen: https://codepen.io/csscourse/pen/xxyrwOR):
<div class="scrollable">
<div class="loader">
<div class="spinner"></div>
</div>
<div class="table"></div>
</div>
.scrollable {
max-height: 65vh;
overflow: auto;
position: relative;
.loader {
background: blue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.spinner {
width: 50px;
height: 50px;
background: yellow;
}
}
.table {
background: green;
width: 3000px;
height: 500px;
}
}
The blue area represents the loader overlay that I want to stay visible on the div when it is scrolled. The table (green) inside the div has dynamic dimensions, making it challenging to match the sizes of the table and the overlay. Additionally, the loader overlay includes a spinner in the center (yellow block).
Could you please provide guidance on how to achieve this?