Overflow Points In CSS — Smashing Journal

In case you’re a front-end developer, you will have come throughout horizontal scrollbar points, particularly on cell. As a result of there are numerous causes of scrollbar issues, there isn’t any simple resolution. Some points could be mounted rapidly, and a few want slightly debugging ability.

What Is an Overflow Difficulty?

Earlier than discussing overflow points, we must always confirm what one is. An overflow problem happens when a horizontal scrollbar unintentionally seems on an online web page, permitting the person to scroll horizontally. It may be attributable to various factors.

It may happen due to unexpectedly huge content material or a fixed-width aspect that’s wider than the viewport. We are going to discover the entire causes on this article.

Find out how to Spot Overflow

An essential a part of fixing this problem is noticing it within the first place. If we all know when and the place it occurs, we will house in on that a part of an online web page. There are alternative ways to detect overflow, from manually scrolling to the left or proper or by utilizing JavaScript.

Let’s discover the methods to detect overflow.

Scrolling to the Left or Proper

The primary strategy to uncover an overflow problem is by scrolling the web page horizontally. In case you’re in a position to scroll, this can be a warning that one thing is improper with the web page.

Utilizing JavaScript to Discover Parts Wider Than the Physique

We will add a snippet to the browser console to point out any parts wider than the physique. That is useful for pages with plenty of parts.

var docWidth = doc.documentElement.offsetWidth;

[].forEach.name(
  doc.querySelectorAll('*'),
  operate(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

CSS Define to the Rescue

Making use of CSS’ define to all parts on the web page provides us a touch about parts that transcend the web page’s physique.

* {
    define: stable 1px purple;
}

Even higher, Addy Osmani has a script that provides a top level view to every aspect on the web page with a random coloration.

[].forEach.name($$("*"),operate(a){a.type.define="1px stable #"+(~~(Math.random()*(1

Overflow Label in Firefox

Firefox has a useful function that tells you which of them parts are inflicting overflow. Hopefully, different browsers will add this!

Deleting Web page Parts

One other widespread means is to open the browser’s DevTools and begin deleting parts one after the other. As soon as the difficulty disappears, then the part you’ve simply deleted might be the trigger. I discovered this technique helpful in circumstances the place you’ve recognized the difficulty however don’t know why it’s occurring.

When you’ve discovered the place the overflow is occurring, then it is going to be simpler to make a decreased check case for additional debugging.

Widespread Overflow Points

Mounted-Width Parts

One of the widespread causes of overflow is fixed-width parts. Usually talking, don’t repair the width of any aspect that ought to work at a number of viewport sizes.

.aspect {
    
    width: 400px;
}

Utilizing Flexbox With out Wrapping

As helpful as Flexbox is, not permitting gadgets to wrap to a brand new line when no area is obtainable is dangerous.

.mother or father {
    show: flex;
}

Right here, flex gadgets would possibly trigger horizontal overflow in case the area isn’t sufficient to suit them multi function line:

Be certain to make use of flex-wrap: wrap when the flex mother or father is meant to work at totally different viewport sizes.

.mother or father {
    show: flex;
    
    flex-wrap: wrap;
}

CSS Grid

While you’re utilizing CSS grid, designing responsively is essential. Take the next grid:

.wrapper {
    show: grid;
    grid-template-columns: 1fr 300px 1fr;
    grid-gap: 1rem;
}

The instance above will work nice until the viewport is narrower than 300 pixels. Whether it is, then overflow will happen.

To keep away from such a difficulty, use grid solely when sufficient area is obtainable. We will use a CSS media question like so:

.wrapper {
    show: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    .wrapper {
        grid-template-columns: 1fr 300px 1fr;
    }
}

Lengthy Phrases

One other widespread motive for overflow is a protracted phrase that doesn’t match within the viewport. This occurs extra on cell due to the viewport’s width.

To repair this, we have to use the overflow-wrap property.

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

I’ve written an in depth article on dealing with each quick and lengthy content material with CSS.

This repair is especially helpful with user-generated content material. An ideal instance of this can be a feedback thread. A person would possibly paste a protracted URL of their remark, and this needs to be dealt with with the overflow-wrap property.

Minimal Content material Measurement in CSS Flexbox

One other attention-grabbing explanation for overflow is the minimal content material dimension in Flexbox. What does this imply?

In accordance with the specification:

“By default, flex gadgets gained’t shrink under their minimal content material dimension (the size of the longest phrase or fixed-size aspect). To alter this, set the min-width or min-height property.”

Which means a flex merchandise with a protracted phrase gained’t shrink under its minimal content material dimension.

To repair this, we will both use an overflow worth apart from seen, or we will set min-width: 0 on the flex merchandise.

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

Minimal Content material Measurement in CSS Grid

As with Flexbox, we’ve got the identical idea of minimal content material dimension with CSS Grid. Nevertheless, the answer is a bit totally different. CSS-Tips refers to it as “grid blowout”.

Let’s discover the difficulty. Suppose we’ve got a wrapper with an apart and a foremost part laid out with CSS grid.

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

Additionally, we’ve got a scrolling part in the primary part, for which I’ve used flexbox.

.part {
    show: flex;
    hole: 1rem;
    overflow-x: auto;
}

Discover that I didn’t add flex-wrap, as a result of I need the flex gadgets to be on the identical line. This didn’t work, nonetheless, and it’s inflicting horizontal overflow.

To repair this, we have to use minmax() as a substitute of 1fr. This fashion, the primary aspect’s minimal content material dimension gained’t be auto.

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

Detrimental Margins

A component positioned off display may cause overflow. Often, that’s as a result of the aspect has a detrimental margin.

Within the following instance, we’ve got a component with a detrimental margin, and the doc’s language is English (i.e. left to proper).

.aspect {
    place: absolute;
    proper: -100px;
}

Apparently, when the aspect is positioned on the alternative aspect, there isn’t any overflow. Why is that?

I confronted this problem recently and wrote about it. It seems that this conduct is intentional. In accordance with the CSS specification:

“UAs should clip the scrollable overflow space of scroll containers on the block-start and inline-start sides of the field (thereby behaving as if that they had no scrollable overflow on that aspect).”

For an English doc, the inline-start aspect is the left aspect, so any aspect positioned off-screen on the left will probably be clipped, and thus there will probably be no overflow.

If positioning a component off display is admittedly obligatory, be certain to use overflow: hidden to the mother or father to keep away from any overflow.

Photographs With out max-width

In case you don’t deal with massive photographs forward of time, you will notice overflow. Be certain to set max-width: 100% on all photographs.

img {
    max-width: 100%;
}

Viewport Models

Utilizing 100vw does have a draw back, which is that it will probably trigger overflow when the scrollbar is seen. On macOS, 100vw is okay and gained’t trigger horizontal scroll.

On Home windows, scrollbars are at all times seen by default, so overflow will happen.

The explanation for that is that with the worth 100vw, there isn’t any consciousness of the width of the browser’s vertical scrollbar. In consequence, the width will probably be equal to 100vw plus the scrollbar’s width. Sadly, there isn’t any CSS repair to that.

Nevertheless, we will use JavaScript to measure the viewport’s width excluding the scrollbar.

operate handleFullWidthSizing() {
  const scrollbarWidth = window.innerWidth - doc.physique.clientWidth

  doc.querySelector('myElement').type.width = `calc(100vw - ${scrollbarWidth}px)`
}

Injected Adverts

Adverts injected on web page load may cause overflow in the event that they’re wider than their mother or father. Add overflow-x: hidden to the mother or father aspect to stop this.

Double-check each advert on the web site to make sure that it’s not inflicting overflow.

Is Making use of overflow-x: hidden to physique a Good Thought?

Choosing overflow-x: hidden is like placing on a bandage with out addressing the issue. When you’ve got overflow, then it’s higher to unravel the basis problem.

Furthermore, making use of overflow-x: hidden to the physique aspect shouldn’t be a good suggestion as a result of place: sticky gained’t work if a mother or father has overflow-x: hidden.

Find out how to Keep away from Overflow in CSS

Beneath are issues to verify to cut back overflow points in CSS. I hope you discover it helpful!

Check With Actual Content material

Nothing beats testing with actual content material on a web site. In doing so, you make sure that the format can deal with totally different styles of content material.

Account for Consumer-Generated Content material

For a part like a feedback thread, account for circumstances wherein the person will paste a protracted URL or kind a protracted phrase, as defined above.

Use CSS Grid and Flexbox Fastidiously

As helpful as CSS grid and flexbox are, they’ll simply trigger overflow if used incorrectly. As we mentioned, not utilizing flex-wrap: wrap may cause overflow, as can grid-template-columns: 1fr 350px when the display is narrower than 350 pixels.

Additional Studying on SmashingMag:

(vf, il, al)