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


About The Writer

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

On this article, we are going to discover the causes of overflow points and tips on how to resolve them. We may 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’ll have come throughout horizontal scrollbar points, particularly on cellular. As a result of there are various causes of scrollbar issues, there is no such thing as a simple answer. Some points will be mounted shortly, and a few want just a little debugging ability.

What Is an Overflow Concern?

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

A wireframe example of a website with six boxes showing as placeholders for text or images
(Large preview)

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

The right way to Spot Overflow

An essential a part of fixing this concern is noticing it within the first place. If we all know when and the place it occurs, we will dwelling 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 approach to uncover an overflow concern is by scrolling the web page horizontally. If you happen to’re capable of scroll, it is a warning that one thing is incorrect 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 are able to add a snippet to the browser console to point out any parts wider than the physique. That is helpful for pages with plenty of parts.

var docWidth = doc.documentElement.offsetWidth;

[].forEach.name(
  doc.querySelectorAll('*'),
  perform(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 crimson;
}
The same example showing with an element being portrayed outside the viewport
(Large preview)

Even higher, Addy Osmani has a script that provides an overview to every ingredient on the web page with a random shade.

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

Overflow Label in Firefox

Firefox has a useful function that tells you which ones parts 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 frequent method is to open the browser’s DevTools and begin deleting parts 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 instances 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 is going to be simpler to make a reduced test case for additional debugging.

Widespread Overflow Points

Mounted-Width Parts

Probably the most frequent causes of overflow is fixed-width parts. Typically 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 out there is dangerous.

.dad or mum {
    show: flex;
}

Right here, flex objects may trigger horizontal overflow in case the house isn’t sufficient to suit them multi functional 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 dad or mum is meant to work at completely different viewport sizes.

.dad or mum {
    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 except 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 out there. We are able to 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 frequent cause 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 it is 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 behind 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 alter this, set the min-width or min-height property.”

Which means 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 aside 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 have now the identical idea of minimal content material measurement with CSS Grid. Nevertheless, the answer is a bit completely 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 have now a wrapper with an apart and a predominant part laid out with CSS grid.

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

Additionally, we have now 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 a substitute of 1fr. This manner, 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;
}

Unfavorable Margins

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

Within the following instance, we have now a component with a detrimental 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 other aspect, there is no such thing as a overflow. Why is that?

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

I confronted this concern 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 aspect).”

For an English doc, the inline-start aspect is the left aspect, 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 de facto vital, make certain to use overflow: hidden to the dad or mum to keep away from any overflow.

Pictures With out max-width

If you happen to don’t handle massive pictures forward of time, you will note overflow. Be sure to set max-width: 100% on all pictures.

img {
    max-width: 100%;
}

Viewport Items

Utilizing 100vw does have a draw back, which is that it could actually 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 at all times 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 is no such thing as a consciousness of the width of the browser’s vertical scrollbar. Because of this, the width can be equal to 100vw plus the scrollbar’s width. Sadly, there is no such thing as a 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)

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

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

  doc.querySelector('myElement').fashion.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 dad or mum. Add overflow-x: hidden to the dad or mum ingredient to stop 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 Thought?

Choosing overflow-x: hidden is like placing on a bandage with out addressing the issue. In case you have overflow, then it’s higher to resolve the foundation concern.

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

The right way to Keep away from Overflow in CSS

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

Take a look at With Actual Content material

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

Account for Consumer-Generated Content material

For a part like a feedback thread, account for instances wherein the consumer will paste an extended URL or kind an extended phrase, as defined above.

Use CSS Grid and Flexbox Rigorously

As helpful as CSS grid and flexbox are, they will 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