时间戳

首页 > 解决方案 > 分数单位防止子元素溢出

css - 分数单位防止子元素溢出

问题描述

我对 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>

我难住了。我试过溢出网格元素，设置一个宽度，我发现唯一可以工作的就是改变1fr一个完全不切实际的固定值。

标签： csscss-grid

解决方案

推荐阅读