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

Screenshot of actual effect：

enter image description here

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)：

enter image description here

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)：

enter image description here

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 : )