Html 使用flexbox强制div填充页面的剩余高度

我有一个页面，我想这样设计，我有一个导航栏，下面有一个固定高度的div，下面有一个灵活的div，灵活的div包含两个水平排列的元素，灵活的div应该占据页面的剩余宽度

我遵循了本教程，但没有达到他们描述的效果：

我希望

区域2

div占据页面的剩余高度

我怎样才能做到这一点

闪电战：

导航
区域1
A区

B区

.导航{
身高：5雷姆；
背景色：浅绿色；
}
.导航间隔器{
边缘顶部：5雷姆；
}
1.区域1{
高度：10雷姆；
背景颜色：棕色；
}
.填土高度{
显示器：flex；
弯曲方向：立柱；
}
.填充高度>div{
弹性：1；
}
.第2区{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.第2-a区{
宽度：20%；
背景色：#4f90ff；
}
.第2-b区{
宽度：80%；
背景色：#2b41ff；
}

使

填充高度

div使用所有可用空间

最小高度：100%，但是，嘿，没有空间填充，嗯，
高度：100vh处理这个问题

body {
  height: 100vh;
}

.fill-height {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

也可以将主体设置为弹性柱容器：


正文{
保证金：0；
最小高度：100vh；
显示器：flex；
柔性流动：柱；
}
.导航{
身高：5雷姆；
背景色：浅绿色；
}
.导航间隔器{
边缘顶部：5雷姆；
}
1.区域1{
高度：10雷姆；
背景颜色：棕色；
}
.填土高度{
显示器：flex；
弯曲方向：立柱；
弹性：1
}
.填充高度>div{
弹性：1；
}
.第2区{
显示器：flex；
弯曲方向：行；
}
.第2-a区{
宽度：20%；
背景色：#4f90ff；
}
.第2-b区{
宽度：80%；
背景色：#2b41ff；
}

导航
区域1
A区

B区
使用
最小高度
代替高度。如果内容高于100vh，则会出现混乱的溢出。