JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="outer">
  <div class="inner">
    <header>
      <p>
        header
      </p>
    </header>
    <section>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
    </section>
  </div>
</div>

CSS

html, body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.outer {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.inner {
  background: yellow;
  max-height: 100%;
  overflow: hidden;
  width: 200px;
  margin: 50px auto;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
}

header {
  flex: 0 0 auto;
}

section {
  flex: 1 1 auto;
  background: green;
  overflow-y: auto;
}

p {
  background: white;
}