JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1">
  <aside>Short text OK</aside>
  <section>Short text OK</section>
</div>
<br>
<div id="container2">
  <aside>Short text OK</aside>
    <section>
      <div id="overflower">
       <table>
        <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td><td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td><td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td><td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td><td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
      <td>aaa</td>
    </table>
    </div>
  </section>
</div>

CSS

section, aside {
  font-size:1.5em;
}
#container1, #container2 {
  display:flex;
}
#overflower {
  overflow-x:auto;
}
aside {
  background-color:red;
  flex-basis:15em;
  width:15em;
  min-width:15em;
  flex-grow:0;
}
section {
  background-color:green;
  flex-grow:1;
  flex-basis:15em;
}