Inbuilt scrolling support for custom control

Question

There is a known behaviour with cs grid where if the content of the cell is larger than the computed layout cell size, the cell expands. Meaning your grid is only a fixed size if the content is less than or equal to the cell size.

There are several workarounds for this that involve you changing the style for the grid and cells themselves.

However, I have noticed that these workarounds are not necessary when I use a 3rd party control (e.g MUI List), where all you have to do is set overflow: 'auto' on the actual control itself. You don't have to mess with the parent grid.

So my question is. How do I go about making a control that will switch to a scrollviewer if its content is too large to be displayed inside a grid cell. i.e I don't want to mess with the parent grid every time I want to use my control in a new place.

Below I have included a fiddle that shows the issue and the workaround. But I would to know how to fix it without messing with grid cells, as per the case when using 3rd party controls

https://jsfiddle.net/8b074ung/11/

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  width: 800px;
  height: 300px;
}

.cell {
  background: red;
  margin: 10px;
  /* min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row; */
}

.scrollable {
  background: orange;
  margin: 10px;
  overflow: auto;
}

.row {
  background: purple;
  display: grid;
  grid-auto-flow: column;
  width: max-content;
}

.item {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: green;
}

<div class="grid">

  <div class="cell">
    <div class="scrollable">
      <div class='row'>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
      </div>

    </div>
  </div>

  <div class="cell">

  </div>
</div>

imhvost · Accepted Answer · 2025-08-04 19:41:16Z

2

Set .cell { min-width: 0; } or .cell { overflow: hidden; } (any value other than visible) - then they will shrink!

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(800px, 100%);
  height: 300px;
  gap: 20px;
}

.cell {
  background: red;
  min-width: 0;
}

.scrollable {
  background: orange;
  margin: 10px;
  overflow: auto;
}

.row {
  background: purple;
  display: grid;
  grid-auto-flow: column;
  width: max-content;
  padding: 10px;
  gap: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background: green;
}

<div class="grid">
  <div class="cell">
    <div class="scrollable">
      <div class='row'>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
      </div>
    </div>
  </div>
  <div class="cell"></div>
</div>

answered Aug 4 at 19:41

imhvost

11.7k2 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davi Aug 5 at 7:53

Thanks, didn't know that :) Upvoted

Davi · Accepted Answer · 2025-08-04 13:56:53Z

0

Based on the code you provided, one solution would be to not use the "fr" unit when defining your grid and instead use a more concrete size like 50%. This way, your .scrollable container shouldn't expand the grid column:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 50%); /* <-- 50% instead of 1fr */

  width: 800px;
  height: 300px;
}

.cell {
  background: red;
  margin: 10px;
  /* min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row; */
}

.scrollable {
  background: orange;
  margin: 10px;
  overflow: auto;
}

.row {
  background: purple;
  display: grid;
  grid-auto-flow: column;
  width: max-content;
}

.item {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: green;
}

<div class="grid">

  <div class="cell">
    <div class="scrollable">
      <div class='row'>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
      </div>

    </div>
  </div>

  <div class="cell">

  </div>
</div>

edited Aug 4 at 13:56

answered Aug 4 at 13:49

Davi

4,2941 gold badge18 silver badges29 bronze badges

2 Comments

wforl Aug 4 at 14:59

Good to know. One thing I did notice with this solution though is that it doesn't seem to work with gap? if you add a gap of 20px to .grid (and a background colour to make it clear) .. it knocks things out of wack.

Davi Aug 5 at 7:51

Yes, that's right. This works - as I wrote - "based on the code you provided", which doesn't use gap or mention it as a requirement.

Collectives™ on Stack Overflow

Inbuilt scrolling support for custom control

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related