JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="wrapper">
    <div class="track-list-and-workspace">
      <div class="track-list">
          test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
          test<br/>test<br/>
          test<br/>
      </div>
      <div class="workspace">
        <div class="playbar"></div>
          test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
          test<br/>test<br/>
         ...

SCSS

* {
  box-sizing: border-box;
}

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

html {
  body {
    .wrapper {
      height: 100%;
      // min-height: 100%; // not my solution
      display: flex;
      flex-direction: column;
      
      background-color: red;
      padding: 20px;

      .track-list-and-workspace {
        position: relative;

        flex: 1;
        overflow-x: hidden;
        overflow-y: auto; // I need the scrolling to happen here
        display: flex;
        
        .track-list {
          width: 50px;
          background-color: yellow;
        }

        .workspace {
          flex: 1;
          position: relative;
          display: flex;
          flex-direction: column;
          padding: 10px;
          
          background-color: green;

          .playbar {
            position: absolute;

            left: 50px;
            top: 0;
            height: 100%;

            width: 10px;
            background-color: black;
          }
        }
      }
    }
  }
}