JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<div class="block">
<div class="head">
</div>


<div class="body">
<div class="container">
<div class="content">
</div>
</div>
</div>

</div>

CSS

.block {
  border: 1px solid #e0e0e0;
  height: 200px;
  display: flex;
  flex-direction: column;
  
}
.head {
  background: #f0f0f0;
  flex: 0 0 40px;
}

.body {
  flex: 1 1 auto;
  
}
.container {
  height: 100%;
  overflow-y: auto;
}

.content {
  background: red;
  height: 280px;
  opacity: .2;
}