If you’re a front-end developer, you’ve probably run into horizontal scrollbar issues, especially on mobile. Because there are many reasons for scrollbar problems, there is no straightforward solution. Some problems can be solved quickly, while others require a little debugging skill.

What is an overflow problem?

Before we talk about overflow, we should be clear about what overflow is. An overflow problem occurs when a horizontal scroll bar inadvertently appears on a web page, allowing the user to scroll horizontally. It can be caused by different factors.

It can happen because the content is unexpectedly wide, or because fixed-width elements are wider than viewports. We will explore all of these reasons in this article.

How to spot spills

An important part of solving the problem is noticing it in the first place. If we knew when and where it was happening, we could monitor that part of the web page. There are different ways to detect overflows, including manually scrolling left or right or using JavaScript.

Let’s explore ways to detect an overflow.

Scroll left or right

The first way to find overflow problems is to scroll the page horizontally. If you can scroll, this is a warning that something is wrong with the page.

Use JavaScript to find elements that are wider than the body

We can add a fragment in the browser console to display any element that is wider than the body. This is handy for pages with many elements.

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); }});Copy the code

CSS outline to the rescue

Applying a CSS outline to all the elements on the page gives us an indication of the element body beyond the page.

* {
    outline: solid 1px red;
}
Copy the code

Even better, Addy Osmani has a script that adds a random color outline to each element on the page.

[].forEach.call($$(""),function(a){a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16)})
Copy the code

Overflow labels in Firefox

Firefox has a useful feature that can tell you which elements are causing overflows. Hopefully other browsers will add this feature too!

Deleting page elements

Another common approach is to open DevTools in your browser and start removing elements one by one. Once the problem disappears, the part you just deleted may be the cause. I’ve found this to be useful in situations where you’ve identified the problem but don’t know why it’s happening.

Once you find out where the overflow is occurring, it becomes easier to create a miniaturized test case for further debugging.

Common overflow problems

Element of fixed width

One of the most common causes of overflow is fixed-width elements. In general, do not fix the width of any element; these elements should work in multiple viewport sizes.

.element {/* Don't do this */ width: 400px; }Copy the code

Use Flexbox without packages

Although Flexbox is useful, it is risky not to allow projects to wrap in a new row when there is no available space.

.parent {
    display: flex;
}
Copy the code

Here, flexible projects may cause horizontal overflows in case there is not enough space to fit them all on one line.

Be sure to use flex-wrap: wrap when flexible parent items should work at different viewport sizes.

.parent {
    display: flex;
    /* Do this */
    flex-wrap: wrap;
}
Copy the code

CSS grid

Responsive design is important when you use CSS grids. Take the following grid for example.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    grid-gap: 1rem;
}
Copy the code

The example above works well unless the viewport is narrower than 300 pixels. If so, an overflow will occur.

To avoid such problems, use a grid only when there is enough space. We can use a CSS media query like this.

.wrapper { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } @media (min-width: 400px) { .wrapper { grid-template-columns: 1fr 300px 1fr; }}Copy the code

Long word

Another common cause of overflows is a long word that doesn’t fit in the viewport. Because of the viewport width, this happens more on the mobile end.

To solve this problem, we need to use the overflow-wrap attribute.

.article-content p {
  overflow-wrap: break-word;
}
Copy the code

I wrote a detailed article about using CSS to handle long and short content.

This fix is especially useful for user-generated content. A perfect example is a comment thread. A user might paste a long URL in their comments, which should be handled with the overflow-wrap attribute.

Minimum content size in CSS Flexbox

Another interesting reason for overflow is the minimum content size in Flexbox. What does that mean?

According to the specification.

“By default, Flex projects do not shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

This means that a flexible project with long words will not shrink below its minimum content size.

To solve this problem, we can use overflow instead of Visible, or we can set min-width: 0 on the Flex item.

.card__name {
    min-width: 0;
    overflow-wrap: break-word;
}
Copy the code

Minimum content size in CSS grid

As with Flexbox, we have the same concept of minimum content size in the CSS Grid. However, the solution is somewhat different. Css-tricks calls this “grid blowing out”.

Let’s explore this question. Suppose we have a wrapper with a narrator and a main section, arranged in a CSS grid.

.wrapper {
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-gap: 40px;
}
Copy the code

Also, we have a scrolling section in the main section, for which I used Flexbox.

.section {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}
Copy the code

Notice that I didn’t add flex-wrap because I wanted the Flex project to be on the same line. However, this did not work, and it caused a horizontal overflow.

To solve this problem, we need to use minmax() instead of 1fr. In this way, the minimum content size of the main element will not be Auto.

.wrapper {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-gap: 40px;
}
Copy the code

Negative margin

An element placed off-screen causes an overflow. Typically, this is because the element has a negative margin.

In the example below, we have a negative margin element, and the language of the document is English (that is, left to right).

.element {
    position: absolute;
    right: -100px;
}
Copy the code

Interestingly, there is no overflow when the element is positioned on the other side. Why is that?

I recently came across this problem and wrote about it. As it turns out, this behavior was intentional. According to the CSS specification.

“UA must clip the scrollable overflow area of the scrollable container on the side where the block of the box begins and the inline side where it begins (thus representing no scrollable overflow on that side).”

For an English document, the inline-start edge is left, so any elements positioned outside the left screen will be clipped, so there will be no overflow.

If you really need to position an element off-screen, be sure to put overflow: Hidden to avoid any overflow.

There is no imagemax-width

If you don’t process large images ahead of time, you’ll see overflows. Be sure to set max-width: 100% on all images.

img {
    max-width: 100%;
}
Copy the code

Viewport unit

One drawback to using 100VW is that it can cause overflows when the scrollbar is visible. On macOS, 100vw is fine and does not cause horizontal scrolling.

On Windows, scrollbars are always visible by default, so overflows occur.

The reason is that at a value of 100vw, the browser’s vertical scroll bar width is not realized. So width is going to be equal to 100vw plus the width of the scroll bar. Unfortunately, no CSS can solve this problem.

However, we can use JavaScript to measure the viewport width, excluding the scroll bar.

function handleFullWidthSizing() {
  const scrollbarWidth = window.innerWidth - document.body.clientWidth

  document.querySelector('myElement').style.width = calc(100vw - ${scrollbarWidth}px)
}
Copy the code

Injected advertising

An AD injected at page load that is wider than its parent will cause an overflow. Add overflow-x: Hidden to the parent element to prevent this.

Double check every AD on the site to make sure it doesn’t cause a spill.

willoverflow-x: hiddenApply tobodyIs that a good idea?

Choosing overflow-X: Hidden is like putting on a bandage without solving the problem. If you have an overflow, then it’s best to address the root cause.

Also, it is not a good idea to apply overflow-x: hidden to the body element, because position: sticky will not work if the parent element has overflow-x: hidden.

How to avoid overflows in CSS

Here are some things to check to reduce overflow problems in CSS. I hope you find it useful

Test with real content

Nothing is more important than testing with real content on your website. By doing so, you can ensure that the layout can handle different kinds of content.

Consider user-generated content

For components like comment threads, consider that the user will paste a long URL or type a long word, as described above.

Use CSS grids and Flexbox sparingly

Although CSS grids and Flexbox are useful, they can easily cause overflows if not used properly. As we discussed, not using flex-wrap: wrap causes overflow, and grid-template-columns: 1FR 350px when the screen is narrower than 350 pixels.

Read more on SmashingMag.

  • Things you can do with CSS today
  • Accessible front-end components
  • CSS Audit Tool
  • CSS generator
  • . And more in our CSS layout guide.