Css 使用flexbox使一组div自动适合屏幕，而不会向下或向右溢出。（无滚动）

因此，我需要创建一个布局，如下面的两个屏幕截图所示。
纵向模式：4行，每行4个div，最后一行2个div。
在横向模式下：2行，每行7个div。

使用以下css很容易生成4行和2行：

@media screen and (orientation:landscape) {
.cat_div{
  width:14.2vw; // for 7 items per row → 2 rows
}
@media screen and (orientation:portrait) {
.cat_div{
  width:25vw; // for 4 items per row → 4 rows
}

我的问题：这个棘手的部分，我似乎没有弄清楚

不允许向下滚动！它需要适合任何尺寸的窗户。因此div需要根据大小变得越来越大，越来越小，因此用户永远不必向下滚动

我已经玩了几个小时了，但我似乎没有得到想要的结果。谁能看看我的密码吗

我的完整代码和代码片段：

.cat\u图标{
背景颜色：黄花；
位置：相对位置；
宽度：100%；
身高：0；
垫底：100%；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
}
·猫分区{
边框：浅灰色实薄；
利润率：0.5vw；
}
#cat_btn_集装箱{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
#cat_btn_集装箱{
高度：80vh；
}
@媒体屏幕和屏幕（方向：纵向）{
·猫分区{
宽度：22.5vw；
身高：50%；
}
}
@媒体屏幕和屏幕（方向：横向）{
·猫分区{
宽度：12.5vw；
身高：50%；
}
}

第一类

带列的引导网格（每行需要添加到12列）是实现完全响应的最佳方式。您也可以使用媒体查询，但bootstrap中有许多屏幕大小的类。

我希望避免使用bootstrap，因为它不是一个由bootstrap提供支持的网站，而bootstrap通常会在我的体验中导致更多冲突。而且我不能在12列中放入7个div。。。主要的问题是溢流到底部。。。我更新了我的问题以获得更多的澄清。我不知道为什么我在这里被否决。这个问题真的很彻底。。。如果有人可以建议我如何编辑问题，使其更符合SO标准，请让我知道。我希望在这个问题上至少能再次得到0分。