JSFiddle - React, Tailwind, and code Playground

by Nic Fontaine

HTML

<div class="cont">
  <div class="d1"></div>
  <div class="d2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

.cont {
  display: flex;
  background: red;
  align-items: stretch;
  height: 400px;
}
.d1 {
 flex: 1;
 /* height: 400px; */
 background: grey;
}
.d2 {
  /* flex: 0 1 200px; */
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  flex-shrink: 0;
}
.d2 div {
  width: 200px;
  height: 200px;
  background: aqua;
  margin-bottom: 2px;
}