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    Right top content    Right top content    Right top content    Right top content    Right top content    Right top content    Right top content     Right top content    Right top content    Right top content    Right top content   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;
}