JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<div id="page">
  <header id="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi assumenda, neque qui cum quas similique totam in quibusdam optio inventore vero explicabo dignissimos quaerat fugit. Placeat, autem voluptate praesentium ad ab alias, cumque, incidunt
    dolore fuga facere error labore molestias.
  </header>
  <section id="content">
    <div class="sidebar"></div>
    <main>
      <div id="content-table">
        <div class="column"></div>
        <div class="column">
          <div id="scroll-container">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis similique atque est blanditiis fugit natus, facere reiciendis, aut quisquam libero. Incidunt et veritatis, obcaecati tenetur tempora iusto numquam nostrum excepturi atque rem fugit sed
            rerum molestias aliquid, beatae. Illo iure, ab sit accusamus quae, laborum soluta dicta a corporis in assumenda id maiores delectus quo quia deserunt consectetur recusandae, commodi saepe porro necessitatibus, optio qui. Ipsum repellat aut
            excepturi quasi, quos, aperiam culpa? Nesciunt neque ex, nihil nulla animi aut voluptatum nisi quisquam ad error voluptas, soluta quibusdam itaque, ipsum ullam cupiditate molestias officia repudiandae debitis repellendus inventore praesentium
            iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam velit temporibus omnis unde reiciendis quam culpa, quidem repudiandae minima explicabo quod sunt impedit vitae ipsum iusto ex assumenda aut eius voluptatem! Quidem accusantium
            debitis, soluta laudantium quae blanditiis accusamus dicta alias in tenetur. Reprehenderit distinctio similique, iste cumque nisi doloremque eaque unde corporis earum quia, aperiam dolor modi. Maiores reiciendis, officia neque esse! Odio repudiandae
            fugiat vero porro expedita deleniti, unde beatae, dignissimos eum, quibusdam dicta quae. Culpa, recusandae, aut! Eligendi, harum. Quam...

SCSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #20262E;
  font-family: Helvetica;
  overflow: hidden;
}

#page {
  height: 100%;
  display: grid;
  /*    grid-template-columns: 1fr;*/
  grid-template-rows: auto 1fr;
  overflow: auto;
}

header {
  grid-area: "header";
  background: dodgerblue;
}

#content {
  grid-area: "content";
  background: hotpink;
  display: grid;
  grid-template-columns: 1fr 4fr;
  overflow: auto;
}

div.sidebar {
  // 1fr
  background-color: darkgray;
}

main {
  //4fr
  height: 100%;
  overflow: auto;
  //padding-top: 20px;
  background-color: darkcyan;
}

#content-table {
  display: table;
  height: 100%;
  overflow: auto;
  border-collapse: separate;
  border-spacing: 10px 0;
  padding-top: 20px;
  background: orange;
}

div.column {
  display: table-cell;
  height: 100%;
  background-color: hotpink; //border: 2px solid black;
  //min-width: 25%;
  overflow: auto;
  padding: 10px;
}

#scroll-container {
  height: 100%;
  overflow: auto;
  padding: 10px;
  background: green;
}