Items overlap

[simionato-mobisec]

Describe the bug

I followed what is written here to implement a dynamic scroller, but looks like the items overlap.

Reproduction

MyDynamicScroller.vue

<template>
  <DynamicScroller
    style="height: 500px;"
    :items="items"
    :min-item-size="24"
  >
    <template #default="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[item]"
        :data-index="index"
      >
        {{ `${index} ${item}` }}
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

<script>
export default {

  data() {
    return {
      items: []
    }
  },

  created() {
    this.findMessages()
  },

  methods: {

    findMessages() {
      MessageService.findAll().then(
        ({ data }) => {
          this.items = data
        },
        err => {
          console.log(err)
        }
      )
    }
  }
}
</script>

Messages have variable heights, with a min height of 24px. This is the output: As you can see, items are overlapped (don't pay attention to weird chars).

Used Package Manager

npm

Validations

• [X] Read the docs.
• [ ] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.