FLEXBOX LAYOUT - 3 COLUMN

by bizamajig

HTML

<div class="bizamajig-flex-container" style="padding: 0 20px 0 20px;">

  <div class="bizamajig-flex-header">Header</div>
  <div class="bizamajig-flex-outer">
    <div class="bizamajig-flex-aside-1"></div>
    <div class="bizamajig-flex-content">article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br />article<<br...

CSS

html, body {
  margin:0;
  height:100%;
  min-height:100%;
}
body,
.bizamajig-flex-container {
  display: flex;
  flex-direction: column;
}
.bizamajig-flex-container {
  flex: 0 100%;
}
.bizamajig-flex-header { 
  display: flex;
  flex: 0 64px;
  background: black;
  color: #fff;
  text-align: center;
  z-index: 0;
}
.bizamajig-flex-outer {
  display: flex;
  flex: 1;
  border: 10px solid yellow;
  overflow: auto;
}
.bizamajig-flex-aside-1 {
  flex: 0 0 0; /* 256px; */
  order: 0;
  background: cornflowerblue;
  overflow: auto;
}
.bizamajig-flex-content {
  flex: 1;
  order: 1;
  background: crimson;
  overflow: auto;
}
.bizamajig-flex-aside-2 {
  flex: 0 1 250px; /* Or, 0, and 256px; */
  order: 2;
  background: cornflowerblue;
  overflow: auto;
}
.bizamajig-flex-panel { 
  display: flex;
  background: black;
  color: #fff;
  text-align: center;
  z-index: 0;
}
.bizamajig-flex-panel.height-50 {
  flex: 0 50px;
}
.bizamajig-flex-panel.height-100 {
  flex: 0 200px;
}
.bizamajig-flex-panel.height-200 {
  flex: 0 200px;
}