Twitter bootstrap 如何在scroll元素中仅在屏幕上放置4个框？

我有一个具有一定宽度（高度可以改变）和滚动条的元素。里面有一个盒子。框大小等于带滚动条的元素宽度/高度的一半。在滚动元素之前，我只想在滚动元素中显示4个初始框。但是，如果我取消第五个框的注释，一切都会破裂

我怎样才能解决这个问题

.main{
显示器：flex；
弯曲方向：立柱；
宽度：400px；
高度：300px；
溢出：自动；
溢出x：隐藏；
背景色：#dfdfdf；
}
梅因街{
显示器：flex；
弯曲方向：行；
柔性生长：1；
}
.main.row.col-6{
宽度：200px；
}
.main.row.col-6分区{
边框宽度：1px；
边框样式：实心；
边框颜色：#fff；
背景色：#888；
}

矩形1
矩形2
矩形3
矩形4

将

高度设置添加到
.main.row
和
.main.row.col-6
，如我的代码片段所示，以避免高度降低：


.main{
显示器：flex；
弯曲方向：立柱；
宽度：400px；
高度：300px；
溢出：自动；
溢出x：隐藏；
背景色：#dfdfdf；
}
梅因街{
显示器：flex；
弯曲方向：行；
高度：100%；/*已添加*/
柔性生长：1；
}
.main.row.col-6{
宽度：200px；
高度：50%；/*已添加*/
}
.main.row.col-6分区{
边框宽度：1px；
边框样式：实心；
边框颜色：#fff；
背景色：#888；
}

矩形1
矩形2
矩形3
矩形4
矩形5
您是否愿意使用javascript？问是因为我不确定如何用纯天然气来解决这个问题CSS@sol我知道，它可以通过javascript实现，但我不想使用它。你是说这个吗@这是一个沙箱。我的意思是，如果您取消对html中第五个框的注释，scroll元素将尝试容纳所有框，但我只想在初始屏幕上显示4个框，在向下滚动时显示其他框。@Evgeniy我很抱歉。错误的链接。试试这个