Usando Vue, tengo un contenedor div con altura fija, desbordamiento: oculto, quiero iterar a través de la matriz de javascript, agregar cada elemento al div y detenerme cuando se alcanza la parte inferior del espacio div. También necesitaría que responda.

 <div class="container"> <div class="header">Header</div> <div class="body" v-for="item in items"> <div>{{ item.data }}</div> </div> <div class="footer">Footer</div> </div> .container { display: flex; height: 100%; flex-direction: column; } .header { height: 100px; } .footer { height: 100px; } .body { flex: 1; overflow: hidden; }

Tal vez necesitaría recuperar la altura del contenedor en píxeles y dividirla por la altura de la fuente de su elemento. ¿Quizás los datos? En cualquier caso, la cantidad de elementos que se muestran debería cambiar cada vez que se cambia el tamaño de la ventana para que responda.