Using Vue, I have a div container with fixed height, overflow: hidden, I want to iterate through javascript array, adding each item to the div, and stop when the bottom of the div space is reached. Would also need it to be responsive.

<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;
}

Maybe you would need to retrieve the height of the container in pixels and divide by font height of your item.data perhaps? In any case the number of items displayed would need to change whenever window is resized in order to make it responsive.