JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">Menu</div>
<div class="page">
  <div class="top">Top</div>
  <div class="content">
    <div class="left">
        <div class="l1"> <br><br><br>Left1 <br><br><br></div>
        <div class="l2"> 
          <table>
            <tbody>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
              <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
            </tbody>
          </table>
        
        </div>
    </div>
    <div class="right">Right Right Right Right</div>
  </div>
</div>

CSS

body{margin: 0}
.page {
    display:flex;
    flex-direction: column;
    width: 100%;
    height: 200px;
    background-color:white;
}
.content,
.left{
    display: flex;
    min-height: 0;  /* NEW */
}
.left {
    flex-direction: column;
    padding-right: 20px;/* NEW */
}
.l1, .l2{
  width: calc(100% + 20px);/* NEW */
}
.l1{
  background-color:lightgreen;
  flex: 1;
}
.l2{
  background-color:steelblue;
  overflow-y:auto;
}
.right {
    background-color: red;
    flex: 1;
}