JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-content">
  <div class="header">header</div>
  <div class="content">
    content
    <div class="long-content">
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      <button type="button">Button</button>
    </div>
  </div>
</div>

CSS

.main-content {
  width: 100%;
  background-color: #595959;
  height: 300px;
}

.header {
  background-color: #000000;
  height: 50px;
}

.content {
  background-color: red;
  padding: 15px;
  height: calc(100% - 50px);
  overflow: auto;
  position: relative;
}