JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div class="container">
  <div class="left">
    left section
  </div>
  <div class="middle">
    middle section
    <p>Lucas ipsum dolor sit amet gilad mace tarkin jango hypori ka x1 glymphid t88 terrik. Marek tarkin woostoid ziro ki-adi-mundi geonosis lars sulorine utai. Thrawn kwi zabrak metalorn qrygg. Tarkin quelli moff vulptereen skirata rom. K-3po tchuukthai
      evocii iv di besalisk dressellian k-3po binks. Teevan darth sly polis cathar solo garm. Ka boltrunians r2-d2 rattataki. Dashade tavion moff saleucami barriss qui-gon ferroans naberrie neti. Klivian cad irek cordé t88. Lama r5-d4 zuggs felucia luke.
      Piell latter kobok kaminoan c'baoth dressellian oswaft. </p>
    <p>Thistleborn corellia togorian droch var gran. -lom miraluka vader saleucami. Antemeridian ken y'bith vader watto rebo klaatu dak. Darth malastare zev rattatak mirialan disra durge irek tharin. Tib priapulin duro boba luuke biggs. Wuher iv tatooine
      oola wuher arkanian maarek. Naboo fel moff dantooine lars ugnaught lahara lahara triclops. Terrik lars fosh fel jan cadavine. Fel dengar dexter terrik sikan argazdan sunrider nosaurian darth. Sikan r2-d2 anomid lobot. Chirrpa vodran tusken raider
      desann jagged isolder dunwell k-3po ysanne. </p>
    <p>Vuffi x1 darth finis qu darth ubese sunrider. Tavion mon raioballo tusken raider motti chadra-fan. Ebe fortuna r4-p17 carlist hutt reach. Tion y'bith mon calamari lyn dashade vader. Hssis obi-wan yoda amedda grizmallt maximilian mirta. Cornelius vivenda
      vuffi sulorine lepi gunray. Quarren arkanian typho senesca. Wat quee darth nas himoran. Mirax trianii kaleesh organa kowakian yoda d8 xappyh. Breha tc-14 fortuna terrik axmis jerjerrod iblis jarael. Ev-9d9 skywalker vedder beru solo mace. Gordin
      yuzzem firmus rahn vaathkree max mas jerjerrod ogemite. </p>
    <p>Sy vulptereen hutt freedon kenobi malastare. Obi-wan talortai mayagil dantooine di castell jar aka malastare. Gev calrissian carnor solo wilhuff gran darth...

CSS

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45 'Source Code Pro';
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  overflow-x: hidden;
}

body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
}

.container {
  display: flex;
  color: #fff;
  /*width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;*/
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  background: blue;
}

.left {
  background: blue;
  min-height: 100vh;
  min-width: 150px;
  flex-shrink: 0;
}

.middle {
  background: green;
  min-height: 100vh;
  overflow: hidden;
  width: calc(100vw - 400px);
  padding-bottom: 60px;
  flex-grow: 1;
  flex-shrink: 0;
  /*width: 500px; works but not helpful */
  /*width: auto; nope */
  /*width: 100%; nope */
}

.middle .fixed-footer {
  background: orange;
  position: fixed;
  bottom: 0;
  width: 100vw;
  width: inherit;
  padding: 16px 0;
  overflow-x: hidden;
}

.right {
  background: blue;
  min-height: 100vh;
  min-width: 250px;
  flex-shrink: 0;
}

@media screen and (min-width: 640px) {
  html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
    overflow-y: auto;
  }
}