Hay un contenedor con algunos elementos que se pueden quitar de él. Si se desplaza hasta el final del contenedor y elimina el último elemento, el contenedor se "encogerá" automáticamente y se moverá hacia arriba.

 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>

Lo que quiero: cuando se elimina cualquier elemento del contenedor, el contenedor de alguna manera extenderá su altura de contenido interno de tal manera que no cambiará su posición de desplazamiento (es decir, todos los elementos sobre el eliminado no cambian su posición). Sin embargo, no quiero que este contenedor tenga un espacio adicional al final definido por la propiedad de altura de CSS. Quiero que este espacio aparezca solo cuando sea necesario, es decir, cuando este espacio se vuelve invisible después de desplazarse hacia arriba, ya no es posible desplazarse hacia atrás.

¿Cómo puedo lograr esto con HTML5 puro, CSS y JS?