JSFiddle - React, Tailwind, and code Playground

HTML

<header>PAGE HEADER</header>
 <div id="content">
   <div id="menu_bar">
     <div id="tabs">
       <div class="tab">Tab 0</div>
       <div class="tab">Tab 1</div>
       <div class="tab">Tab 2</div>
       <div class="tab">Tab 3</div>
       <div class="tab">Tab 4</div>
       <div class="tab">Tab 5</div>
       <div class="tab">Tab 6</div>
       <div class="tab">Tab 7</div>
       <div class="tab">Tab 8</div>
       <div class="tab">Tab 9</div>
       <div class="tab">Tab 10</div>
       <div class="tab">Tab 11</div>
       <div class="tab">Tab 12</div>
     </div>
   </div>
   <div id="main">
     <div id="main_header">MAIN HEADER</div>
     <div id="main_content">
       <div id="wide">
         ThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContentThisIsWideContent
       </div>
       <div id="tall">
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
         <p>ThisIsTallContent</p>
       </div>
     </div>
   </div>

CSS

body {
  display: flex;
  flex-direction: column; /* will help with triggering overflow (by allowing use of flex properties further in) */
  height: 100vh;
  margin: 0; /* override default margins */
  font-family: Arial, Helvetica, sans-serif;
}

header {
  padding: 10px;
  background-color: lightgray;   
  border: 1px solid black;
}

#content {
  display: flex; /* children line up in a row */
  height: 50vh;  /* hard limi t help trigger overflow condition, while leaving plenty of space for the header */
  flex-grow: 1;  /* consume remaining height */
}

#menu_bar {
  height: 100%;  /* inherit parent height; essential for overflow to trigger */
  flex: 0 1 300px; /* space for tabs; max-width taken from individual tabs rule */
}

#tabs {
  overflow: auto; /* first scrollbar requirement met */
  height: 100%;  /* inherit parent height; essential for overflow to trigger */
  background-color: lightgreen; /* demo */
}

.tab {
  padding: 10px;
  /* max-width: 300px; */ /* rule moved to container */
  border-bottom: 1px solid black;
}


#main {
  flex: 1; /* consume all space (so box width not dependent on content */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0; /* override flex minimum width setting */
  border-left: 1px solid black;
}

#main_header {
  padding: 10px;
  background-color: yellow;
  border-bottom: 1px solid black;
}

#main_content {
  display: flex;
  flex-direction: column;
  height: 100%; /* can shrink to fit (flex-shrink: 1 default) */
  overflow: auto; /* second scrollbar requirement set */
  background-color: orange;
}

#wide {
  padding-top: 10px;
}

* {
  box-sizing: border-box;
}