JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
 <div class="left">
 Left content
 </div>
 <div class="right">
  <div class="right-top-wrapper">
   <div class="right-top-content">
    Right top content
   </div>
  </div>
  <div class="right-bottom">
   Right bottom
  </div>
 </div>
</div>

CSS

.main {
  display: flex;
  height: 200px;
}

.left {
  flex: 1 1 0;
  background: red;
}
.right {
  flex: 0 0 0;
  display:flex;
  flex-direction: column;
  background: green;
  padding: 4px;
}

.right-top-wrapper {
  flex: 0 1 auto;
  overflow-x: auto;
  overflow-y: scroll;
  background: blue;
}

.right-top-content {
  margin: 4px;
  /* height:100px; */
  min-height: 100px; /* new */
  width:100px;
  background: pink;
}

.right-bottom {
  flex: 0 0 0;
  background: yellow;
  margin: 4px;
}