JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="wrapper">
    <div class="track-list-and-workspace">
      <div class="workspace">
        <div class="playbar"></div>
        <div class="content">
          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>
    </div>
  </div>
</body>

SCSS

* {
  box-sizing: border-box;
}

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

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

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

        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;

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

          .content {
            background-color: white
          }

          .playbar {
            position: absolute;

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

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