Creating a layout that has a fixed header, fixed sidebar nav, fixed content with flexbox

Question

I am creating a layout for a web application using FlexBox. Please note that I am not trying to use bootstrap for this. I just want to do it in plain flexbox css.

Here is the structure I want:

Row1: Fixed header that is 64px tall. Row2: Fixed sidenav that takes up 250px of left side, Fixed content that takes up the remainder of right side.

<div id="row1">
     <div class="header"></div>
</div>
<div id="row2">
     <div class="sidenav"></div>
     <div class="main-content"></div>
</div>

The key here is that the sidenav and the main-content should both be 100% of the screen with their own scroll bar. The actual browser scroll bar should never show horizontally or vertically.

Answer 1

I would make body a flex column at 100vh height, set #row2 to grow and use overflow-y: scroll on .sidenav and .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;
}

<div id="row1">
     <div class="header">header</div>
</div>
<div id="row2">
     <div class="sidenav">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div>
     <div class="main-content">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div>
</div>

Answer 2

Here is a way using flexbox

body,
html {
  height: 100%;
  margin: 0
}

#row1 {
  display: flex;
  height: 64px;
  background: red;
  position: fixed;
  width: 100%;
}

#row2 {
  display: flex;
  top: 64px;
  position: relative;
  height: calc(100% - 64px);
  width: 100%
}

.sidenav {
  position: fixed;
  width: 250px;
  height: calc(100% - 64px);
background: green;
  overflow-y: scroll
}

.main-content {
  flex: 1;
  background: blue;
  overflow-y: scroll
}

<div id="row1">
  <div class="header"></div>
</div>
<div id="row2">
  <div class="sidenav">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text end </div>
  <div class="main-content">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text </div>
</div>