CSS Javascript：通过Javascript动态添加的元素超出了父容器的填充约束

我试图实现一个垂直无限滑块来显示将从后端发送的tweet

我已经为带有

id=“tweet\u space”

的滑块创建了一个

div

容器，并且为我创建的tweet分配了

class=“tweet”

对于滑块容器，我在CSS文件中指定了

padding:10px

。但滑块容器的底部不遵循此填充规则最后添加的元素在容器中不可见。最后的要素；在本演示代码案例中，数字49、50不会出现在滑块容器中（您可以在开发人员工具中看到，这些数字已添加到滑块中，但不可见）。

单击带有文本的按钮

单击
，滑块开始运行

我应用的Javascript逻辑是：

将元素添加到div，直到最后一个子元素接触到
容器

如果最后一个子容器接触或超出父容器的边界；对于每个新元素，删除第一个子元素并附加新元素

代码：
var tweet_space=document.getElementById（“tweet_space”）；
var tweet_space_coords=tweet_space.getBoundingClientRect（）；
var bottomBorder=tweet\u space\u coords.bottom；
var click=document.getElementById（“click”）；
单击.addEventListener（“单击”，推特滑块）；
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
异步函数tweet_slider（）{
对于（var i=0；i所以您想为容器添加额外高度？@ThanhTrung否我不想添加额外高度。我只想让所有元素都适合滑块，并应用底部填充约束。由于高度具有预定义的固定高度，您应该向容器添加溢出，因为您确定所有元素的高度都大于容器高度，并且最后添加的元素在容器中不可见。-->因为它们溢出，而您正在隐藏溢出。您实际拥有的是预期行为，溢出元素与填充重叠，并被隐藏的
溢出：隐藏
剪切填充框之外的Y将父元素上的高度替换为最小高度