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

Twitter bootstrap 如何在scroll元素中仅在屏幕上放置4个框?,twitter-bootstrap,css,flexbox,bootstrap-4,Twitter Bootstrap,Css,Flexbox,Bootstrap 4,我有一个具有一定宽度(高度可以改变)和滚动条的元素。里面有一个盒子。框大小等于带滚动条的元素宽度/高度的一半。在滚动元素之前,我只想在滚动元素中显示4个初始框。但是,如果我取消第五个框的注释,一切都会破裂 我怎样才能解决这个问题 .main{ 显示器:flex; 弯曲方向:立柱; 宽度:400px; 高度:300px; 溢出:自动; 溢出x:隐藏; 背景色:#dfdfdf; } 梅因街{ 显示器:flex; 弯曲方向:行; 柔性生长:1; } .main.row.col-6{ 宽度:200px

我有一个具有一定宽度(高度可以改变)和滚动条的元素。里面有一个盒子。框大小等于带滚动条的元素宽度/高度的一半。在滚动元素之前,我只想在滚动元素中显示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我很抱歉。错误的链接。试试这个