When using the DynamicScroller of vue-virtual-list, there is unexpected gap between sub-list items

Screenshot of actual effect：

The abnormal blank space is circled in red。The template and CSS code are as follows:

<DynamicScroller :items="msg_list" :min-item-size="50" id="chat-box-container"> <template v-slot="{ item, index, active }"> <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.message]" :data-index="index" :key="item.id"> <div class="chat-box"> <img class="avatar" :src="item.avatar" /> <div class="chat-content-container"> <div class="name">{{ item.username }}</div> <div class="chat-content">{{ item.content }}</div> </div> </div> </DynamicScrollerItem> </template> </DynamicScroller> .chat-box { display: flex; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: aqua; } .chat-content-container { margin-left: 10px; } .name { color: #d1d5db; } .chat-content { display: inline-block; margin-top: 10px; border: 2px solid rgba(185, 172, 172, 0.527); border-radius: 6px; background-color: rgba(185, 172, 172, 0.527); padding: 5px 10px; direction: ltr; color: #d1d5db; } #chat-box-container { border: 1px solid #fff; border-radius: 10px; padding: 10px; margin: 20px 20px; background-color: #36393f; overflow: auto; }

Format of data source：

{ "id": 1, "userID": 2, "avatar": "https://ts3.tc.mm.bing.net/th/id/OIP-C.7GLMYPqMlt2LgkbPsOnDIAAAAA?cb=ucfimg2ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3", "content": "hello，我是管理员", "username": "admin", "createTime": "2026-04-05T13:14:18.000+00:00", "isDelete": 0 }

Since I haven't set any padding or margin in CSS, I expect the layout to follow the normal document flow, as shown in the image(The effect without using DynamicScroller)：

When I inspected the page structure, I found that the transformY property had been added to each sub-item, and it was precisely this property that caused the gap (because when I manually changed the transformY to 0, the gap disappeared)：

All items are 56px in height in this case.
I don't know why there is such a transformY, and there are only four elements on the page shown in the image above, yet all the data has been rendered.This is clearly incorrect.

I would like to know where I went wrong, as well as the reasons behind the unexpected gaps and incorrect rendering behavior.
I would be very grateful if you could help me with this : )