Home Static analysis Blog

Bizarre Grid Overflow Quirk

Jacob Hardbower

Is your page overflowing, even when you explicity tell it not to? You may be running into this weird quirk.

Check out this example to get an idea of the issue.

Though uncommon, we sometimes want content to overflow on the horizontal axis. We want this content to be scrollable within its parent, so we add overflow: auto to the parent and call it a day. Or do we?

What's this? Why is my page content now larger than the width of the screen? Why does the whole page scroll instead of just my child element? Who are you? Where's Brandon!?

Calm down. It will be okay.

Grid is not your friend, no matter what Maciej says

Just kidding. Grid is great for certain applications, but it may be the cause of your issue.

Something that's not obvious is that direct children of display: grid elements have their min-width set to auto, which allows them to stretch to the size of their children's content. When that childs content is something with a non-explicit width, like a big table, you start to see strange results.

There are 2 primary solutions:

The first is to set an explicit overflow property on the direct child of your grid element that holds the overflowing element.

<div class="grid">
  <div class="overflow-auto">
    <!-- or overflow-hidden -->
    <div>
      <div>
        <div class="overflow-auto">
          <div>I'm overflowing</div>
        </div>
      </div>
    </div>
  </div>
</div>

This isn't the most ideal method because it may introduce scrolling where you don't want it (and may not work in all cases).

The second option is to set a min-width of 0px on that same element.

<div class="grid">
  <div class="min-w-0">
    <div>
      <div>
        <div class="overflow-auto">
          <div>I'm overflowing</div>
        </div>
      </div>
    </div>
  </div>
</div>

This is the better option, as it solves the issue, typically without introducing other conflicts.

Conclusion

This is very much an edge case issue, and you may find that you're able to easily manage overflowing content within a grid parent. When I was making the demo for this, I had trouble keeping the markup simple, because in most cases, adding overflow-auto was enough to fix things. Tables are the primary catalyst for this issue.

← Back to blog
Home Static analysis Blog Storybook Made with ❤️, by us.