JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
  <div class="main">1</div>

  <div class="wrap">
    <div class="top">
      <p>one</p>
      <p>two</p>
      <p>three</p>
      <p>one</p>
      <p>two</p>
      <p>three</p>
      <p>one</p>
      <p>two</p>
      <p>three</p>
      <p>one</p>
      <p>two</p>
      <p>three</p>
      <p>one</p>
      <p>two</p>
      <p>three</p>
      <p>one</p>
      <p>two</p>
      <p>three</p>
    </div>
    <div class="bottom">
      <p>tututu</p>
    </div>
  </div>
</div>

CSS

html, body, .outer {
  height: 100%;
  margin: 0;
}

.main {
  width: 20%;
  height: 100%;
  background-color: maroon;
  float: left;
}

.wrap {
  width: 80%;
  background-color: green;
  display: table;
  max-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.top {
  display: table-row;
  height: 100%;
  background-color: red;
}

.bottom {
  display: table-row;
  background-color: yellow;
}