JSFiddle - React, Tailwind, and code Playground

HTML

<div class="singlepage">
  <div class="main">
    <div class="left">
      <div class="content">
        <ul>
          <li>hi</li>
          <li>hi</li>
          <li>hi</li>
          <li>hi</li>
          <li>hi</li>
          <li>hi</li>
        </ul>
      </div>
      <footer class="footer"> This is a footer </footer>
    </div>
    <div class="content">
      <ul>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
   ...

CSS

.singlepage {
  display:flex;
  flex-direction:column;
  height: 100vh;
  width: 100vw;
}

.main {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-height: 0;
}

.main > .left {
  background: green;
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: space-between;
}
.left > .content {
  display: flex;
  flex-direction:column;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.left > .footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 1 50px;
  min-width: 0;
  min-height: 0;
}

.main > .content {
  background: linear-gradient(red, yellow);
  overflow-y: auto;
  flex: 1 1 auto;
}