小数单位防止子元素溢出

Question

我对CSS网格和表格溢出有疑问。 TLDR：当网格使用小数单位时，表格不会溢出。

在下面的示例中，表完全溢出。

.table {
  overflow-x: auto;
}

<div class="grid">
  <div class="navigation">
    SideBar
  </div>
  <div class="content">
    <div class="table">
      <table>
        <tr>
          <td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td><td>Column 6</td><td>Column 7</td><td>Column 8</td><td>Column 9</td><td>Column 10</td><td>Column 11</td><td>Column 12</td><td>Column 13</td><td>Column 14</td><td>Column 15</td>
        </tr>
      </table>
    </div>
  </div>
</div>

但是，在以下示例中，页面溢出而不是表格溢出：

.table {
  overflow-x: auto;
}

.grid {
  display: grid;
  grid-template-columns: auto 1fr;
}
.navigation {
  grid-column: 1;
}
.content {
  grid-column: 2;
}

.navigation {
  width: 200px;
  background: #ccc;
}

<div class="grid">
  <div class="navigation">
    SideBar
  </div>
  <div class="content">
    <div class="table">
      <table>
        <tr>
          <td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td><td>Column 6</td><td>Column 7</td><td>Column 8</td><td>Column 9</td><td>Column 10</td><td>Column 11</td><td>Column 12</td><td>Column 13</td><td>Column 14</td><td>Column 15</td>
        </tr>
      </table>
    </div>
  </div>
</div>

我很困惑。我尝试使grid元素溢出，设置宽度，我发现唯一起作用的是将1fr更改为固定值，这是完全不切实际的。