Search code examples
htmlcsscss-grid

overflow-x inside 1fr grid item not working


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

Example

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


Solution

  • 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