创建具有固定标题,固定侧栏导航,使用flexbox固定内容的布局

我正在使用FlexBox为Web应用程序创建布局.请注意,我不是为了这个而尝试使用bootstrap.我只想在普通的flexbox css中做到这一点.

这是我想要的结构:

第1行:固定标题,高64像素.第2行:修复了侧面占据250px左侧的固定侧面,固定内容占据了右侧的剩余部分.

这里的关键是sidenav和main-content应该都是100%的屏幕,并带有自己的滚动条.实际的浏览器滚动条不应该水平或垂直显示.

我会做body一个弯曲column的100vh高度,设置#row2成长和使用overflow-y: scroll上.sidenav和.main-content

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#row2 {
  display: flex;
  flex: 1 0 0;
}
.header {
  height: 64px;
}
.sidenav {
  flex: 0 0 250px;
}
.main-content {
  flex: 1 0 0;
}
.sidenav, .main-content {
  overflow-y: scroll;
}

     
header


     
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo

     
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo