如何使用CSS实现左侧侧边栏面板100%高度自适应？

现有基础代码 #

以下是我当前使用的CSS代码：

.header {
  overflow: hidden;
  height: 60px;
  background: #292940;
  color: #fff;
}

.container {
  flex: 1;
  display: flex;
}

.sidenav {
  width: 15%;
  background-color: white;
}

@media (max-width: 640px) {
  .sidenav {
      display: none;
  }
}

.main {
  background-color: #f4f6f8;
  padding: 20px 30px;
  flex: 1 1 100px;
  order: 1;
  width: 85%;
}

@media (max-width: 640px) {
  .main {
    margin-left: 0;
    padding: 10px;
  }
}

当右侧主内容区域内容较多时布局运行正常，但当右侧内容较少时，左侧侧边栏无法占满100%高度，其高度会随右侧内容的高度自动变化。

我尝试给.sidenav添加height: 100vh属性，修改后代码如下：

.sidenav {
  width: 15%;
  height: 100vh;
  background-color: white;
}

但设置后依然无法实现侧边栏100%高度显示，效果如下：

修复方案 #

问题核心是父容器高度未占满视口剩余高度，flex子元素默认跟随内容高度，且设置的100vh未减去顶部header的60px高度，才会出现溢出和高度不符的问题，按以下修改即可：

• 第一步：给根元素设置满屏高度，body改为纵向flex布局

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}

• 第二步：给container加min-height: 0保证弹性高度正常生效，flex容器的子元素默认会自动拉伸到和容器同高，不需要给侧边栏单独设100vh

.container {
  flex: 1;
  display: flex;
  min-height: 0; /* 新增 */
}

• 可选优化：如果侧边栏内容过长需要独立滚动，给.sidenav加滚动属性

.sidenav {
  width: 15%;
  background-color: white;
  overflow-y: auto;
}

修改完成后，container会自动占满header以外的所有视口高度，侧边栏会自动和container保持同高，既不会跟随右侧内容高度缩短，也不会出现视口溢出的问题。

内容的提问来源于stack exchange，提问作者PNG