<div id="flexbox">
  <header>Header</header>
  <section id="main">
    <aside class="sidebar-left">whatever left</aside>
    <article id="main-section">Main</article>
    <aside class="sidebar-right">whatever right</aside>
  </section>
  <footer>Footer</footer>
</div>
#flexbox {
  display: flex;
  min-height: 100vh;
  min-width: 100vw;
  flex-direction: column;
}

#main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 1em 0;
}

header,
footer {
  height: 50px;
}

aside {
  width: 100px;
}
article {
  flex-grow: 1;
  margin: 0 1em;
  background-color: #f8cecc;
}

header {
  background-color: #ffe6cc;
}
.sidebar-left {
  background-color: #e1d5e7;
}
.sidebar-right {
  background-color: #dae8fc;
}
footer {
  background-color: #d5e7d4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.