overflow-x inside 1fr grid item not working

Question

In a display: grid container, I have 2 child div's. I want the sizes of the div's be like:

1st div: 300px
2nd div: Take remaining width

For Div 2, I want a horizontal scrollbar if the table doesn't fit inside the div. This works as long as I define an exact width value but breaks when I use 1fr.

Snippet (HTML)

<div class="wrapper p-4">
  <div class="first">
    Some info
  </div>
  <div class="second">
    <div class="table-wrapper">
          <table>
            <tr>
              <td>Hello</td>
              <td>There</td>
              ...
            </tr>
            <tr>
              <td>Hello</td>
              <td>There</td>
              ...
            </tr>
          </table>
    </div>
  </div>
</div>

Snippet (CSS)

.wrapper {
  display: grid;
  grid-template-columns: 300px 1fr;

.table-wrapper {
  overflow-x: auto;
...

Code: https://codepen.io/studiojw/pen/ExEXyYZ

Insensible

Please post minimal reproducible example not an external link – Picaroon

Answer 1

The .second element is overflowing. That is the issue. Add overflow-x: scroll to the .second element and that will do the task.

Also you will have to remove the overflow-x: auto; given to .table-wrapper to avoid double scrollbars

Huonghupeh

Answer 2

Adding min-width property to immediate children of grid should fix the problem. This overflow happens because a grid is a layout system based on a content minimum size (as the float layout). You can set min-width to 0.

.wrapper > * {
  min-width: 0;
}

Lynea

thanks, this is really working for fractional cells – Bulkhead

It's better than the validated answer. Because if the table element is deep in the DOM tree we have to add overflow-x: auto; in evey parent element according to @Gibz answer. Your solution solves the problem at the root. – Covin

Answer 3

Have you tried

grid-template-columns: 300px auto;

This should make the 2nd div take the available space

Thermel