JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main">
      <div class="main__header"></div>
      <div class="main__inner">
        <div class="main__inner__header">HEADER</div>
        <div class="main__inner__content">
          <div class="main__inner__content__first">
            <div class="main__inner__content__title-1">Area 1</div>
            <div class="main__inner__content__description-1">
              Reprehenderit voluptate proident incididunt exercitation
              voluptate. Sint ad ad tempor consectetur proident exercitation
              esse consectetur in voluptate veniam dolor. Aute officia aliquip
              irure non quis culpa ut veniam ut. Anim pariatur aliqua cupidatat
              nulla aute pariatur. Dolore pariatur anim commodo aute do laboris
              aute nulla et irure sint duis. Magna exercitation ea mollit eu
              aliqua id in. Dolor ex in irure veniam. Fugiat reprehenderit
              excepteur ullamco dolore do labore labore sit. Ut nulla officia in
              reprehenderit irure elit sint ex eiusmod tempor eiusmod culpa
              laborum cillum et. Pariatur nostrud dolor tempor ad incididunt
              incididunt eiusmod officia mollit amet cillum aliqua. Irure ea
              quis ad. Sit cupidatat veniam aliqua non elit ipsum magna dolore.
              Esse ea fugiat ea elit nulla reprehenderit incididunt ullamco
              dolor mollit eiusmod laboris non. Dolor consequat Lorem eiusmod.
              Enim culpa reprehenderit veniam culpa eiusmod nostrud
              reprehenderit dolore tempor ipsum aliquip labore ut fugiat
              consequat. Nostrud excepteur adipisicing consequat. Quis voluptate
            ...

CSS

.main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: silver;
  overflow: auto;
}

.main__inner__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  max-height: 100%;
}

.main__inner__content__first {
  overflow-y: auto;
  background: pink;
}

.main__inner__content__second {
  overflow-y: auto;
  height: 200px;
  background: MediumSeaGreen;
}

.main__inner__content__description-1,
.main__inner__content__description-2 {
  overflow-y: auto;
}
.main__inner__content__description-1 {
  background: lightblue;
}
.main__inner__content__description-2 {
  background: gold;
}

.main__footer {
  flex-shrink: 0;
}