JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>

    <div class="navbar">
      Pretty navbar
    </div>

    <div class="all-except-navbar">

      <div class="chill-div">
        Top care-free div just chillin'
      </div>

      <div class="greedy-div">

        <div class="the-parent">

          <div class="left-child">
            <div class="div-that-needs-to-scroll">

              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>


            </div>
          </div>
          <div class="right-child">
            <div class="div-that-needs-to-scroll">

              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
              </div>
              <div>
                Some content
   ...

CSS

body, html {
  margin: 0;
  padding: 0;
}
.navbar {
   height: 70px;
   width: 100%;
   background-color: red;
}
.all-except-navbar {
  height: calc(100vh - 70px);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.chill-div {
  width: 100%;
  background-color: blue;
}
.greedy-div {
  width: 100%;
  background-color: green;
  flex: 1;
}
.the-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: pink;
}
.left-child {
  height: 100%;
  width: 35.5%;
  background-color: pink;
}
.right-child {
  height: 100%;
  width: 64%;
  background-color: grey;
}
.div-that-needs-to-scroll {
  background-color: yellow;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-y:scroll;
}