How to prevent table with overflow from escaping fixed width parent when sat within nested flex container?

Question

I have an outer container that is display: flex; This contains two inner containers that I would like to sit adjacent to each other constrained by the page width.

I also have an inner container, also display: flex; with it's children set to have fixed widths. Within the wider of these two containers is a table that I want to be constrained to it's parent's width and overflow auto to allow the table to be scrolled.

My problem is that I can't get the outer containers to be constrained by the page width. I don't want to give either of them a width. I want them to be sized by their content.

HTML

<div class="outer-container">
  <div class="sidebar">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five Six Seven</li>
      <li>Wwwwwwwwwwwwww</li>
    </ul>
  </div>
  <div class="container">
    <div class="left">
      <table>
        <tr>
          <th>Name</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Name</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Name</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
          <th>Favorite Color</th>
        </tr>
        <tr>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Bob</td>
          <td>Yellow</td>
          <td>Yellow</td>
          <td>Yellow</td>
        </tr>
      </table>
    </div>
    <div class="right">
      Some lovely long content goes here
    </div>
  </div>
</div>

CSS

body {
  box-sizing : border-box;
}

.sidebar {
  padding: 1rem;
}

.outer-container {
  display: flex;
  width: 100%;
}

.container {
  width: 100%;
  display: flex;
}

table th,
table td {
  text-align: left;
  padding: .5rem;
}

.left,
.right {
  padding: 1rem;
  overflow: auto;
}

.left {
  width: 75%;
  background: #ccc;
}

.right {
  width: 25%;
}

Codepen

https://codepen.io/afisher88/pen/mzQPrz

Answer 1

Use layout fixed for the table, see my fork

table {
  table-layout: fixed;
  width: 100%;
}

tr {
    display: table-row-group;
}