JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  Head  
</header>
<nav>
  Nav
</nav>
<main>
  <section id="foo">
    <h2>Titel</h2>
    <div class="p1"> Part1  </div>
    <div class="p2">
       <div>
       Part 2a<br>Part 2<br>Part 2<br>Part 2<br>Part 2<br>Part 2<br>Part 2<br>
       Part 2a<br>Part 2<br>Part 2<br>Part 2<br>Part 2<br>Part 2<br>Part 2<br>
       </div>
    </div> 
    <div class="p3"> Part3  </div>
  </section>
</main>
<footer>
  Foot
</footer>

CSS

body {
  margin: 0; padding: 0;
  height: 100vh; 
  background-color: #ccc; 
  display: flex; flex-direction: column;
}

header, footer { background-color: white; flex: 0 0 50px; text-align: center; }
nav { flex: 0 0 auto; background-color: #ccf; }
main { flex: 1 1 200px; }
h2 { background-color: #cfc;}
.p1, .p3 { background-color: #fcc;}

#foo {
  margin: 0 auto; 
  box-sizing: border-box; border: 1px solid black; 
  max-width: 30em; 
  height: 100%;
  display: flex; flex-direction: column;
}
#foo h2, #foo .p1, #foo .p3 { flex: 0 0 auto; }
#foo .p2 { flex: 1 1 100px; overflow-y: auto; }