Screenshot of actual effect：

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

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