vue-virtual-scroller Dynamic scroller not handling correct position

trafficstars

Describe the bug

elements are shown and overlap other items

Reproduction

<template>
    <div>
        <DynamicScroller
            ref="chatScroll"
            :items="chatMsgList"
            class="chat-scroller"
            :min-item-size="50"
            @resize="scrollToEnd"
            @scroll.native.passive="handleScroll"
        >
            <template v-slot="{item, index, active}">
                <DynamicScrollerItem
                    :item="item"
                    :data-index="index"
                    :active="active"
                    :data-active="active"
                >
                    <div class="message-item" v-html="item.content"></div>
                </DynamicScrollerItem>
            </template>
         </DynamicScroller>
    </div>
</template>
<script>
export default {
    computed: {
        chatMsgList() {
            let list = this.$store.state.chat.chatMsgList;
            if (list.length > 200) {
                const num = list.length - 200;
                list.splice(0, num);
            }
            list = list.map((item, index) => {
                return {
                    id: index++,
                    content: item
                };
            });
            return list;
        }
    }
}
</script>

System Info

"vue": "^2.5.17",
"vue-virtual-scroller": "^1.1.2",

Used Package Manager

npm

Validations

[X] Read the docs.
[X] 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.