Connect with us

Technology

Overflow Points In CSS — Smashing Journal


About The Creator

Ahmad Shadeed is a UX designer and front-end developer from Palestine. He enjoys engaged on difficult design and front-end improvement initiatives. He wrote a …
Extra about
Ahmad

On this article, we are going to discover the causes of overflow points and resolve them. We may even discover how trendy options within the developer instruments (DevTools) could make the method of fixing and debugging simpler.

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.

A wireframe example of a website with six boxes showing as placeholders for text or images
Overflow with a fixed-width aspect that’s wider than the viewport. (Massive preview)

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.

An example of a web page being able to horizontally scroll through its content
Every time you may scroll, there may be an overflow in play. (Massive preview)

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;
}
The same example showing with an element being portrayed outside the viewport
A scrollbar seem when a component is exterior the viewport. (Massive preview)

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!

The same wireframe example explained with the help of a useful feature in Firefox
An overflow badge displayed within the Firefox DevTools. (Massive preview)

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 {
    /* Don’t do that */
    width: 400px;
}
Mobile wireframe example showing fixed-width elements outside of the viewport
Cell wireframe instance exhibiting fixed-width parts exterior of the viewport. (Massive preview)

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:

Flex items causing horizontal overflow by appearing outside the viewport
Flex gadgets inflicting horizontal overflow by showing exterior the viewport. (Massive preview)

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;
    /* Do that */
    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.

Overflow showing while the grid item has a width of 300px
Overflow exhibiting whereas the grid merchandise has a width of 300px. (Massive preview)

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.

An example of using long words that do not and cannot fit within the viewport’s width
An instance of utilizing lengthy phrases that don’t and can’t match inside the viewport’s width. (Massive preview)

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?

Another example of using words that are too long to fit in
One other instance of utilizing phrases which are too lengthy to slot in. (Massive preview)

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;
}
A before and after comparison or breaking long words to fit in on the next line and stay within the viewport
A earlier than and after comparability or breaking lengthy phrases to slot in on the subsequent line and keep inside the viewport. (Massive preview)

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”.

An example of a grid blowout in which content does not fit into the given size or width
An instance of a grid blowout wherein content material doesn’t match into the given dimension or width. (Massive preview)

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;
}
An element that is positioned off-screen shown on the right
A component that’s positioned off-screen proven on the precise. (Massive preview)

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

An element that is positioned off-screen shown on the left
A component that’s positioned off-screen proven on the left. (Massive preview)

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 Mac OS with scrollbars hidden that works fine
On Mac OS, scrollbars are hidden. (Massive preview)

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

On Windows there is a horizontal overflow when scrolling
On Home windows, there’s a horizontal overflow when scrolling. (Massive preview)

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.

An example of a page with a viewport of 100vw and 14px on the right being used for the scrollbar
An instance of a web page with a viewport of 100vw and 14px on the precise getting used for the scrollbar. (Massive preview)

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.

Mobile viewport with an overflow caused by an ad that is wider than the viewport
Cell viewport with an overflow attributable to an advert that’s wider than the viewport. (Massive preview)

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:

Smashing Editorial(vf, il, al)

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *