Html 使用flexbox格式化整页桌面web应用程序

我正在尝试构建一个使用全高和全宽布局的web应用程序，我已经解决了一些问题，但最后一个问题让我感到困惑，我认为这是因为我本可以做得更优雅。我不关心此应用程序的响应性设计

从本质上说，这就是我要寻找的：一个有两列的页面，其中左列窄且固定宽度，右列随视口调整大小。在这两列的顶部和底部都是根据其中的内容调整大小的区域，这些内容可以更改。列中间的内容与容器顶部对齐，并在溢出容器时滚动

在此图中，框A和框D根据内容调整大小，但固定在页面顶部。框C和框F同样会根据其中的内容调整大小，并固定在页面底部。B和E中的内容与这些容器的顶部对齐，但如果内容超过框的高度，则会出现滚动条。B和E是唯一应该滚动的框。D、 当窗口大小水平变化时，E、B和F将水平调整大小，但A、B和C不会。滚动条出现在图表中是为了进行解释，但仅当内容超过容器大小时才应出现在输出中（ala

overflow:auto

）

在标记方面，我所寻找的是类似于此的东西，我一直无法以我想要的方式工作：

html，
身体{
身高：100%；
边际：0px；
}
#页面{
显示器：flex；
身高：100%；
}
#边栏{
柔性：0 1 250像素；
显示器：flex；
弯曲方向：立柱；
}
#主要{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
#B,，
#E{
弹性：10自动；
显示器：flex；
弯曲方向：立柱；
溢出：自动；
最小高度：最小含量；
}
#滚动，
#埃斯克罗尔{
flex:01自动；
}

A.
B














B

C
D
E














E

F

您需要将其添加到A、D、C、F中：

#A,#D {
  position: sticky;
  top: 0;
}

#C, #F {
  position: sticky;
  bottom: 0;
}

在这里查看代码片段

html，
身体{
身高：100%；
边际：0px；
}
#页面{
显示器：flex；
身高：100%；
}
#边栏{
柔性：0 1 250像素；
显示器：flex；
弯曲方向：立柱；
}
#主要{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
#B,，
#E{
弹性：10自动；
显示器：flex；
弯曲方向：立柱；
溢出：自动；
最小高度：最小含量；
}
#滚动，
#埃斯克罗尔{
flex:01自动；
}
#A、 #D{
位置：粘性；
排名：0；
}
#C、 #F{
位置：粘性；
底部：0；
}

A.
B














B

C
D
E














E

F

元素独立滚动的秘诀是给它一个固定的高度，然后应用

溢出：自动
或
溢出-y:scroll


标题{
高度：20vh；
背景：红色；
}
页脚{
高度：20vh；
背景：绿色；
}
/*
这就是它发生的地方
固定高度+溢出：自动
*/
文章{
高度：60vh；
溢出：自动；
}
p{
高度：80vh；
}
D

（E）启动滚动条

塔达
F