One of the most time consuming issues when it comes to web development is debugging horizontal scrollbars. They're easy to overlook (and on most Macs, they don't even show up) and if users accidentally scroll, it's likely your layout will look broken to them.

Even when you see a horizontal scrollbar it's hard to determine which element is causing the overflow. Without additional tooling you're forced to hide or remove elements from the DOM using your devtools one by one until the scrollbar disappears.

At that point you might fix the overflow issue for that element and refresh only to find out there were other elements also causing the overflow. You get to do it all over again. Argh!

Common causes of overflows

Before showing how to deal with horizontal overflows, lets see some of the common causes of horizontal overflows:

Setting width to 100vw

The viewport width unit (vw) is a useful way to make things a certain percentage of the screen wide. Unfortunately, this viewport width includes the width of the scrollbars, but your document does not.

If you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow.

When you can, use width: 100% instead. That will take the scrollbar into account. If not, you add overflow: hidden to the surrounding element to prevent the scrollbar.

Fixed width elements

A given image or element might have a width of, say, 500px in your desktop layout. But if you hardcode that in your CSS, it's going to cause a scrollbar on mobile screens that are only 375 pixels wide.

This happens more when you develop the desktop version first, so Mobile first design is a good prevention.

Forgetting to add overflow: hidden to wrappers

Some design elements might require you to place them slightly outside of the viewport, for example a menu that slides in the from the right, or a wider-than-the-viewport-element with rounded corners to get a certain curve in your design:

The curve on that site extended past the viewport, but because it wasn't contained in an element with overflow: hidden, all of it was visible after you scrolled. An overflow: hidden quickly solves the issue.

Dealing with overflows

Now that we know some of the reasons overflow happens, lets look at how to fix them. What makes all of these examples potentially difficult is that, by default, elements are "invisible". They're there and take up space, but unless they have a background or border you won't see where they are.

A common solution for this it to add outlines to all elements, for example with this simple CSS:

* {
  outline: 1px solid red;
}

We're using outline here and not border, because outline does not affect the rest of the layout in a way that border does. Indeed, adding a border to all elements might cause a horizontal overflow where there wasn't one before.

It's such a useful way to debug layouts that Polypane has this built-in. With the cmd/ctrl + d shortcut Polypane draws boxes around all elements in all panes, and with the "Layout debugging" overlay it does so for a single pane. We give different elements different border colors to keep them apart.

Polypane with layout debugging turned on

That might give you some hint as to which element is causing the scrollbar, but you still have to hunting for 1-pixel lines.

That's why Polypane's layout debugging overlay includes a second feature: When Polypane detects a pane with a horizontal scrollbar, it automatically highlights elements that cause the overflow:

You won't have to hunt around for them any longer, all overflowing elements are visually highlighted and easy to fix.

This is just one of the many features in Polypane that will save you time and frustration. Start a trial and try it for yourself.

Build your next project with Polypane

  • All plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Back to blog
Before you leave...

Join thousands of devs getting tips and tricks on building better websites.

  • Be the first to know when we launch new CSS resources and web development and design tools.