Why are my columns with no fixed width not autosizing based on the window width?

Question

I have a table with some columns that have a fixed width. In some of the columns there is some text with ellipsed CSS properties. Why are the columns without a fixed width not autosizing if I change the width of the window? When running the snippet below I would expect that the columns without a fixed width would become smaller when making the window smaller.

table {
  text-align: left;
  table-layout: auto;
  width: 100%;
}

th,
td {
  padding: 0;
  border: 1px solid #dddddd;
  border-collapse: collapse;
}

th {
  background-color: #f2f2f2;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.fixedWidth80 {
  width: 80px;
}

.wrapper {
  background-color: aliceblue;
  width: 100%;
}

<div class="wrapper">
 <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th class="fixedWidth80">Column 2</th>
      <th>Column 3</th>
      <th class="fixedWidth80">Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="ellipsis"
          >This is a very long text that is ellipsed</span
        >
        <span class="ellipsis"
          >This is a very long text that is ellipsed</span
        >
      </td>
      <td><span>Data 2</span></td>
      <td>
        <span class="ellipsis"
          >This is a very long text that is ellipsed</span
        >
      </td>
      <td><span>Data 4</span></td>
      <td><span>Data 5</span></td>
    </tr>
    <tr>
      <td>
        <span class="ellipsis"
          >This is a very long text that is ellipsed</span
        >
      </td>
      <td><span>Data 2</span></td>
      <td>
        <span class="ellipsis"
          >This is a very long text that is ellipsed</span
        >
      </td>
      <td><span>This is a bit longer</span></td>
      <td><span>This is a bit longer</span></td>
    </tr>
  </tbody>
 </table>
</div>