JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 500px; position: relative;">
    
        
        <div class="body">
        <div class="main">
        
            <div class="page-header">
                Page Header. Content columns are below.<br />
                Page Header. Content columns are below.<br />
                Page Header. Content columns are below.<br />
                Page Header. Content columns are below.<br />
                Page Header. Content columns are below.<br />
                Page Header. Content columns are below.<br />
            </div>
        
            <div class="content">
          
                <div class="box">asdasd</div>
                
            </div>
            
        </div>
    </div>
    
    
</div>

CSS

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
      overflow-y: auto;

}

.box {
  min-height: -webkit-min-content;
  display: flex;
    height: 1200px;
    
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

.column > div {
  background: red;
}


















/* All of these are just for this demo's design. */

body {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 50px;
  text-transform: uppercase;
  font-weight: bold;
}

.page-header {
  padding: 6px 20px;
  background: #004141;
  color: #fff;
  font-size: .8em;
}

.content {
  background: #ddd;
}