JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

CSS

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  /* min-height: 100%; */
  height: 100%; /*added*/
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  overflow: auto; /*added*/
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}