Imagine a container holding various elements that can be removed one by one. As you scroll to the bottom of the container and remove an element, the container should dynamically adjust its size and position itself upwards.
function remove(target) {
target.remove();
}body {
margin: 0;
}
.container {
overflow-y: scroll;
height: 200px;
background-color: gray;
}
.el {
height: 60px;
background-color: cadetblue;
margin: 5px;
text-align: center;
vertical-align: middle;
line-height: 60px;
font-size: 20pt;
}<div class="container fill">
<div class="el" onclick="remove(this)">1</div>
<div class="el" onclick="remove(this)">2</div>
<div class="el" onclick="remove(this)">3</div>
<div class="el" onclick="remove(this)">4</div>
<div class="el" onclick="remove(this)">5</div>
<div class="el" onclick="remove(this)">6</div>
<div class="el" onclick="remove(this)">7</div>
</div>My goal is for the container to expand its height after removing an element while maintaining the scroll position without leaving any extra space at the end determined by CSS. This additional space should only show up as needed, disappearing once scrolled back up so it cannot be reached again.
Is there a way to achieve this using only HTML5, CSS, and JS?