Web-Design
Wednesday April 14, 2021 By David Quintanilla
Overflow Issues In CSS — Smashing Magazine


About The Creator

Ahmad Shadeed is a UX designer and front-end developer from Palestine. He enjoys engaged on difficult design and front-end growth tasks. He wrote a …
More about
Ahmad

On this article, we’ll discover the causes of overflow points and methods to clear up them. We will even discover how fashionable options within the developer instruments (DevTools) could make the method of fixing and debugging simpler.

If you happen to’re a front-end developer, you could have come throughout horizontal scrollbar points, particularly on cellular. As a result of there are a lot of causes of scrollbar issues, there isn’t any simple answer. Some points may be mounted shortly, and a few want a little bit debugging ability.

What Is an Overflow Concern?

Earlier than discussing overflow points, we must always verify what one is. An overflow subject happens when a horizontal scrollbar unintentionally seems on an internet web page, permitting the consumer 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
(Large preview)

It may happen due to unexpectedly broad content material or a fixed-width ingredient that’s wider than the viewport. We’ll discover all the causes on this article.

Easy methods to Spot Overflow

An necessary a part of fixing this subject is noticing it within the first place. If we all know when and the place it occurs, we will residence in on that a part of an internet web page. There are other ways to detect overflow, from manually scrolling to the left or proper or through the use of JavaScript.

Let’s discover the methods to detect overflow.

Scrolling to the Left or Proper

The primary method to uncover an overflow subject is by scrolling the web page horizontally. If you happen to’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
(Large preview)

Utilizing JavaScript to Discover Parts Wider Than the Physique

We will add a snippet to the browser console to indicate any components wider than the physique. That is helpful for pages with a whole lot of components.

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 components on the web page offers us a touch about components that transcend the web page’s physique.

* {
    define: stable 1px crimson;
}
The same example showing with an element being portrayed outside the viewport
(Large preview)

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

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

Overflow Label in Firefox

Firefox has a useful characteristic that tells you which ones components are inflicting overflow. Hopefully, different browsers will add this!

The same wireframe example explained with the help of a useful feature in Firefox
(Large preview)

Deleting Web page Parts

One other widespread manner is to open the browser’s DevTools and begin deleting components one after the other. As soon as the problem 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 problem however don’t know why it’s taking place.

When you’ve discovered the place the overflow is going on, then it will likely be simpler to make a reduced test case for additional debugging.

Widespread Overflow Points

Fastened-Width Parts

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

.ingredient {
    /* Don’t do that */
    width: 400px;
}
Mobile wireframe example showing fixed-width elements outside of the viewport
(Large preview)

Utilizing Flexbox With out Wrapping

As helpful as Flexbox is, not permitting objects to wrap to a brand new line when no house is accessible is dangerous.

.mum or dad {
    show: flex;
}

Right here, flex objects may trigger horizontal overflow in case the house isn’t sufficient to suit them multi function line:

Flex items causing horizontal overflow by appearing outside the viewport
(Large preview)

Be sure to make use of flex-wrap: wrap when the flex mum or dad is meant to work at totally different viewport sizes.

.mum or dad {
    show: flex;
    /* Do that */
    flex-wrap: wrap;
}

CSS Grid

If you’re utilizing CSS grid, designing responsively is necessary. 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
(Large preview)

To keep away from such a problem, use grid solely when sufficient house is accessible. 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 an extended phrase that doesn’t match within the viewport. This occurs extra on cellular due to the viewport’s width.

An example of using long words that do not and cannot fit within the viewport’s width
(Large 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 handling both short and long content with CSS.

This repair is especially helpful with user-generated content material. An ideal instance of this can be a feedback thread. A consumer may paste an extended URL of their remark, and this ought to be dealt with with the overflow-wrap property.

Minimal Content material Measurement in CSS Flexbox

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

Another example of using words that are too long to fit in
(Large preview)

In line with the specification:

“By default, flex objects received’t shrink beneath their minimal content material measurement (the size of the longest phrase or fixed-size ingredient). To vary this, set the min-width or min-height property.”

Because of this a flex merchandise with an extended phrase received’t shrink beneath its minimal content material measurement.

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
(Large preview)

Minimal Content material Measurement in CSS Grid

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

An example of a grid blowout in which content does not fit into the given size or width
(Large preview)

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

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

Additionally, we’ve 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 objects to be on the identical line. This didn’t work, nevertheless, and it’s inflicting horizontal overflow.

To repair this, we have to use minmax() as an alternative of 1fr. This fashion, the primary ingredient’s minimal content material measurement received’t be auto.

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

Adverse Margins

A component positioned off display could cause overflow. Normally, that’s as a result of the ingredient has a adverse margin.

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

.ingredient {
    place: absolute;
    proper: -100px;
}
An element that is positioned off-screen shown on the right
(Large preview)

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

An element that is positioned off-screen shown on the left
(Large preview)

I confronted this subject these days and wrote about it. It seems that this habits is intentional. In line 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 facet).”

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

If positioning a component off display is basically vital, be sure to use overflow: hidden to the mum or dad to keep away from any overflow.

Photographs With out max-width

If you happen to don’t care for giant photos forward of time, you will notice overflow. Be sure to set max-width: 100% on all photos.

img {
    max-width: 100%;
}

Viewport Models

Utilizing 100vw does have a draw back, which is that it may trigger overflow when the scrollbar is seen. On macOS, 100vw is ok and received’t trigger horizontal scroll.

On Mac OS with scrollbars hidden that works fine
(Large preview)

On Home windows, scrollbars are all the time seen by default, so overflow will happen.

On Windows there is a horizontal overflow when scrolling
(Large preview)

The rationale 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 can 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
(Large preview)

Nonetheless, 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').model.width = `calc(100vw - ${scrollbarWidth}px)`
}

Injected Advertisements

Advertisements injected on web page load could cause overflow in the event that they’re wider than their mum or dad. Add overflow-x: hidden to the mum or dad ingredient to forestall this.

Mobile viewport with an overflow caused by an ad that is wider than the viewport
(Large 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 Concept?

Choosing overflow-x: hidden is like placing on a bandage with out addressing the issue. If in case you have overflow, then it’s higher to unravel the basis subject.

Furthermore, making use of overflow-x: hidden to the physique ingredient isn’t a good suggestion as a result of place: sticky received’t work if a mum or dad has overflow-x: hidden.

Easy methods to Keep away from Overflow in CSS

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

Check With Actual Content material

Nothing beats testing with actual content material on an internet site. In doing so, you make sure that the structure can deal with totally different sorts of content material.

Account for Consumer-Generated Content material

For a element like a feedback thread, account for circumstances by which the consumer will paste an extended URL or kind an extended 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 could 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)



Source link