Html FlexBox填充空格

在下图中，我为边栏创建了一个flexbox，一个主区域，然后在右侧创建了一个小区域作为登录区域

左边的第一条边栏有一个固定的高度为600 px，中间的主区域有100VH的高度，右边的边栏有一个固定的高度为200 px。 我的问题是如果可以在右边的空白处填写，在绿色的下面用Frasbox的主要区域内容填写。这是可能的，还是flexbox不适合这种布局

我基本上希望我的主要区域红色内容在绿色区域下方流动

.main{
显示器：flex；
柔性包装：包装；
边框：0px纯黑；
高度：100vh；
}
.侧边栏{
背景:#f1f9；
弹性：1；
高度：600px；
}
.主要地区{
弹性：3；
背景：红色；
}
.rightSidebarSmall{
弹性：1；
背景：绿色；
高度：200px；
}

最近的文件
计划
团队
档案

加号图标按钮
上载5个文件
progressBar
9.8mbps剩余36秒

使用CSS网格是实现这一点的最简单方法，因为您要使用的布局非常非正统。话虽如此，我还是能够得到一个我认为符合你描述的布局，我把它放在笔里

其要点是：

.main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.mainArea {
    grid-column: 1 / 6;
    grid-row: 1;
}
.rightSidebarSmall {
    grid-column: 5 / 6;
    grid-row: 1;
}

---

我认为如果你能把右边的边栏设为绝对位置会更好。这样，您的主区域（红色区域）将被覆盖，绿色区域将与红色区域重叠

.main{
显示器：flex；
柔性包装：包装；
边框：0px纯黑；
高度：100vh；
位置：相对位置；
}
.侧边栏{
背景:#f1f9；
弹性：1；
高度：600px；
}
.主要地区{
弹性：3；
背景：红色；
}
.rightSidebarSmall{
位置：绝对位置；
右：0；
排名：0；
z指数：10；
最小宽度：100px；
高度：200px；
背景：绿色；
}

---

当然，只需使用

float:right

只需确保floating div位于文本的其余部分之前

.main{
宽度：50vw；
高度：50vh；
位置：相对位置；
}
.内部{
背景色：红色；
浮动：左；
宽度：100%；
身高：100%；
单词break：打破一切；
}
.其他{
背景颜色：绿色；
浮动：对；
最大宽度：150px；
}

另一个文本asdfsdf asdf asdf
敏捷的棕色狐狸敏捷的棕色狐狸敏捷的棕色狐狸