JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
  <div class='content'>
    <div class='page-header'>
      System Dashboard
    </div>

    <div class='wrapper'>
      <div class='col-md-4 override'>
        First wrapper First wrapper First wrapper First wrapper First wrapper First wrapper First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper First wrapperFirst wrapperFirst wrapperFirst
        wrapperFirst wrapper First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
      </div>
    </div>

    <div class='footer'>
      Copyright here
    </div>
  </div>
</div>

CSS

* {
   box-sizing: border-box;
 }
 
 body {
   height: 100vh;
   padding: 0;
   margin: 0;
 }
 
 .container {
   height: 100%;
   border: 1px solid #bbb;
 }
 
 .page-header {
   display: block;
 }
 
 .content {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
 .wrapper {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
 
 .override {
   border: 1px solid blue;
   height: 100%;
   overflow: auto;
 }
 
 .footer {
   text-align: center;
   height: 25px;
 }