JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="wrapper">
    <div class="side"></div>
    <div class="content-wrapper">
      <div class="content">
        <div class="topbar"></div>
        <div class="main">
          <div class="header col-lg-4">
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
          </div>
          <div class="details col-lg-8"></div>
        </div>
      </div>
    </div>
  </div>

CSS

body {
  margin: 0;
  background-color: black;  
}

.wrapper {
  display: flex;
  height: 100vh;
}

.side {
  /* width: 224px; */ /* will not be respected without adding `flex-shrink: 0` */
  flex: 0 0 224px; /* new; flex-grow, flex-shrink, flex-basis */
  background-color: blue;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1; /* consume remaining space */
  display: flex;
  flex-direction: column;
}

.wrapper .content-wrapper .content {
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: 0 0 100px;
  /* height: 100px; */
  background-color: aqua;
}

.main {
  height: calc(100vh - 100px); /* new; sets overflow condition */
  background-color: pink;
  display: flex;
}

.header {
  background-color: yellow;
  overflow-y: scroll;
  /* height: 100%; */
}

.details {
  background-color: crimson;
}

.item {
  background-color: white;
  border-style: solid;
  height: 200px; /* not a flex item, so no need to disable flex-shrink */
}