1

I have an issue with CSS grid and an overflowing table. TLDR: When the grid uses fractional units the table won't overflow.

In the example below, the table overflows perfectly.

.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>

However, in the following example the page overflows and not the table:

.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>

I'm stumped. I've tried overflowing the grid element, setting a width, the only thing I have found to work is changing 1fr to a fixed value which is completely impractical.

Chris Spittles
  • 15,023
  • 10
  • 61
  • 85
  • i can see .grid that is overflowing, not the page... body has as width 600px on my screen, and also .grid, the .navigation 200 but the .content 800px... what are you trying to obtain? if you want to make scrollable only the table and not the header, add overflow: scroll; to .content – Alberto Sinigaglia Dec 18 '19 at 12:41
  • use `minmax(0,1fr)` instead of 1fr – Temani Afif Dec 18 '19 at 12:42
  • add `overflow` to `.content` and you don't need to set `overflow-x` on `.table` – Yousaf Dec 18 '19 at 12:46
  • Adding an overflow to content worked as did the minmax(0,1fr). Thank you. – Chris Spittles Dec 18 '19 at 12:50

0 Answers0