JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="header"></div>
 <div class="content">
    <div class="fill f1"></div>
    <div class="fill f2"></div>
    <div class="fill f1"></div>
    <div class="fill f2"></div>
    <div class="fill f1"></div>
    <div class="fill f2"></div>
 </div>
</div>

CSS

.container {  
  background: blue; 
  padding: 10px; 
  height: 200px; 
  width: 200px; 
}

.fill{
  height: 40px; 
  width: 100%; 
}

.f1{
    background: grey; 
}
.f2{
  background: brown;
}

.content { 
  max-height: 100%; 
  max-width: 100%; 
  overflow-y:auto;
}

.header{
    background: yellow; 
    height:30px;
    width:100%;
}