Html 如何使用CSS flexbox创建此布局？

我正在尝试创建以下基本布局：

我目前正在使用以下基本HTML标记（每个HTML元素中的类名和附加标记略有不同）：

但我遇到的问题是，因为我从使用flexbox垂直拉伸所有内容开始，我不知道如何水平拉伸内容，但仍然保持所有内容100%的屏幕高度

也就是说，减去5px的绿色顶部条带，我希望侧边栏的其余部分占据屏幕100%的高度。较大的粉红色部分应填充棕色、紫色和红色部分自然无法填充的部分

通过使用

justify self:flex start，我能够在没有橙色条的情况下使该部件正常工作，
自我证明：拉伸和
自我证明：柔性端。然而，一旦我添加了橙色条，我不知道如何继续做我正在做的事情

橙色条中有一些动态内容，因此我无法设置静态宽度，棕色、紫色、粉色和红色部分应该使用橙色条未占用的任何宽度（我假设使用
flex grow:1；
）

无论如何，我如何得到这个布局（在侧边栏中），我试图将东西拉伸到100%的高度和100%的宽度？我可以只使用flexbox来实现这一点，还是必须使用定位/浮动元素来实现这一切

很抱歉说得含糊不清，但在尝试了几件事情后，我不知道从哪里开始。谢谢。
您需要在某些元素上使用
flex-direction:column
来堆叠子元素。此外，使用
flex:1
将强制该元素增长并填充其父元素中的可用空间

通过在html和正文上设置
height:100%
，可以将
.siteContainer
拉伸为窗口的全高

我添加了背景色，以便您可以看到实际的布局


html，
身体{
保证金：0；
身高：100%；
}
.siteContainer{
显示器：flex；
身高：100%；
}
.侧边栏{
显示器：flex；
弯曲方向：立柱；
宽度：300px；
}
托普格林之旅{
高度：5px；
}
.餐具柜{
弹性：1；
显示器：flex；
}
.sidebarInnerContainer{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.pinkSection，
.淡紫色内容{
弹性：1；
}
.topGreenStrip{背景：绿色；}
.Brown节{背景：秘鲁；}
.purpleSection{背景：darkviolet；}
.pinkSection{背景：粉红色；}
.redSection{背景：红色；}
.rightOrangeStrip{背景：橙色；}
.lightPurpleContent{背景：薰衣草；}

绿色
棕色的
紫色
粉红色
红色
橙色
浅紫色
您需要在某些元素上使用
flex direction:column
来堆叠子元素。此外，使用
flex:1
将强制该元素增长并填充其父元素中的可用空间

通过在html和正文上设置
height:100%
，可以将
.siteContainer
拉伸为窗口的全高

我添加了背景色，以便您可以看到实际的布局


html，
身体{
保证金：0；
身高：100%；
}
.siteContainer{
显示器：flex；
身高：100%；
}
.侧边栏{
显示器：flex；
弯曲方向：立柱；
宽度：300px；
}
托普格林之旅{
高度：5px；
}
.餐具柜{
弹性：1；
显示器：flex；
}
.sidebarInnerContainer{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.pinkSection，
.淡紫色内容{
弹性：1；
}
.topGreenStrip{背景：绿色；}
.Brown节{背景：秘鲁；}
.purpleSection{背景：darkviolet；}
.pinkSection{背景：粉红色；}
.redSection{背景：红色；}
.rightOrangeStrip{背景：橙色；}
.lightPurpleContent{背景：薰衣草；}

绿色
棕色的
紫色
粉红色
红色
橙色
浅紫色
谢谢你的回答，伊托德。但是，如何让
rightOrangeStrip
也能100%伸展高度，同时只占用最小的水平空间？谢谢。橙色条在那里，但是你可以添加
.rightOrangeStrip{min width:5px}
并根据需要进行调整。谢谢你的回答，我添加了。但是，如何让
rightOrangeStrip
也能100%伸展高度，同时只占用最小的水平空间？谢谢。橙色条带在那里，但您可以添加
.rightOrangeStrip{min width:5px}
，并根据需要进行调整
<div class="siteContainer">
    <div class="sidebar">
        <div class="topGreenStrip">
        </div>
        <div class="sidebarContainer">
            <div class="sidebarInnerContainer">
                <div class="brownSection">
                </div>
                <div class="purpleSection">
                </div>
                <div class="pinkSection">
                </div>
                <div class="redSection">
                </div>
            </div>
            <div class="rightOrangeStrip">
            </div>
        </div>
    </div>
    <div class="lightPurpleContent">
    </div>
</div>

.sidebar {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    top: 0;
    width: 300px;
}

.topGreenStrip {
    height: 5px;
    justify-self: flex-start;
}

.sidebarContainer {
    flex-grow: 1;
    justify-self: stretch;
}