Beginner’s Guide to CSS Overflow

Have you ever ever bought your structure trying good, after which all of the sudden a part of your textual content disappears or a scrollbar reveals up out of nowhere. 

It sucks proper? 

Overflow points could make a clear design look messy quick, and it’s not all the time apparent what’s inflicting them. The excellent news is that CSS offers you easy instruments to take management, you simply should know methods to use them. 

Which is why on this information, I’ll stroll you thru what overflow really is, methods to handle it in a number of instructions, in addition to the frequent errors to keep away from in order that your layouts keep tidy and predictable.

Sidenote: Need to take your internet design to the following degree? Check out my complete CSS course:

Be taught all the things from CSS fundamentals to superior CSS strategies by finishing 100+ workouts and initiatives. You may learn to use CSS to create stunning, responsive web sites that wow customers and employers. Change into a CSS Professional and by no means create an unsightly web site once more.

With that out of the way in which, let’s get into this 5-minute tutorial…

What’s CSS overflow?

Most individuals don’t notice this, however once we design a web page on a web site, we group issues into packing containers to assist us construct it. Every field then holds part of the web page.

It’s sort of like Lego.

We join the items block by block so all the things leads to the precise place, with headlines on the prime, pictures and textual content beneath, and call-to-action buttons the place we want them.

The typical person by no means sees this. It’s simply how the browser organizes the web page so it is aware of methods to show it. We then fill these packing containers with no matter content material we wish akin to textual content, pictures, buttons, a mixture of these, and even different packing containers. 

The difficulty in fact is that typically issues don’t match neatly. 

Perhaps your textual content runs longer than the house you gave it, or your picture is wider than the field you dropped it in. When that occurs the content material received’t shrink to suit, and it spills out previous the perimeters of the field.

The factor is, that is CSS working as supposed.

Erm, what?

Yep! It’s because CSS is ready to point out all the things by default, even the elements that don’t match, due to the overflow: seen property.

For instance

Think about you’ve created a small field to carry a picture. Nevertheless, the picture is 600px large, however the field is just 500px. 

.field {
  width: 500px;
  peak: 500px;
  border: 4px stable black;
}

.field img {
  width: 600px;
  peak: auto;
  padding: 20px;
}

Since seen is the default, the browser fortunately reveals the entire picture, although a part of it stands proud.

Clearly, we don’t need this as leaving content material semi-visible often makes pages look damaged. 

So what is the answer?

Properly, for most individuals the primary intuition is to make our design responsive so it shrinks like so:

.field img {
  width: 460px;
  peak: auto;
  padding: 20px;
}

And that’s nice for pictures on this explicit scenario. Nevertheless, this isn’t all the time the proper answer as a result of not all the things can shrink like that. 

For instance

A code block, a chat window, or an extended username nonetheless wants overflow guidelines to deal with the additional content material cleanly. 

For this reason we even have CSS values like hidden, scroll, or auto. These enable us to deal with overflow in several methods relying on the scenario and what we wish to occur.

So let’s get into them.

management CSS overflow with worth properties

There are 8 main values we are able to use.

Every one solves a unique sort of drawback you’ll really run into when constructing pages. The simplest technique to perceive them is with an instance so let’s work by way of them.

overflow: hidden

Some of the frequent makes use of of overflow: hidden is while you wish to crop or masks an ornamental aspect so it doesn’t spill exterior its container. A very good instance is a background picture.

For instance

Let’s say that you simply’ve bought a banner part that’s 200px tall, however your background picture is way taller than that. By default, the picture would stick out and make the entire structure awkward like so:

Not nice proper?

However with overflow: hidden you possibly can hold the perimeters clear by clipping something past the field.

.banner {
  width: 100%;
  peak: 200px;
  border: 2px stable black;
  overflow: hidden; /* crop something exterior */
  background: url("banner.jpg") no-repeat heart;
  background-size: cowl;
}

What’s occurring right here is the browser nonetheless masses your entire background picture, however solely the 200px slice contained in the container is seen. The remaining is minimize off.

That is actually helpful for issues like cropped thumbnails, ornamental shapes, or background images the place customers don’t want entry to the hidden elements. But it surely’s not a good selection for vital content material (like textual content or pictures folks anticipate to learn or view), as a result of as soon as it’s clipped, the person has no manner of seeing it.

overflow: scroll

scroll tells the browser to maintain all of the content material and all the time add scrollbars, it doesn’t matter what.

These then enable the person to click on on the bar and transfer vertically or horizontally relying on which manner it overflows.

For instance

A traditional use case for that is code snippets on an article. Take into consideration a weblog publish or documentation website the place somebody pastes an extended line of code.

You don’t need that line pushing your structure sideways, so as a substitute, you comprise it inside a fixed-width field and let the person scroll to see all of it.

.code-snippet {
  width: 400px;
  peak: 150px;
  border: 1px stable #ccc;
  overflow: scroll; /* all the time present scrollbars */
  font-family: monospace;
  padding: 8px;
  background: #f9f9f9;
}

This ensures customers can all the time entry the total content material. The tradeoff although is that scrollbars present even when there’s nothing to scroll, which may look clunky in some layouts.

The excellent news is we are able to use the following methodology to get round this.

overflow: auto

auto works similar to scroll, however solely reveals scrollbars in the event that they’re wanted.

That is often the higher selection for text-heavy UIs like chat apps, article previews, or code samples. If the content material suits, all the things appears clear. If it overflows, scrollbars seem mechanically so nothing is misplaced.

.code-snippet {
  width: 400px;
  peak: 180px;
  border: 1px stable #ccc;
  overflow: auto; /* scrollbars solely when wanted */
  font-family: monospace;
  padding: 8px;
  background: #f9f9f9;
}

The one challenge is that scrollbars can all of the sudden seem and nudge issues round when content material adjustments, so be careful for small structure shifts.

For this reason the perfect observe is to make use of auto when you recognize overflow

overflow: clip

At first look, clip appears virtually similar to hidden in that each minimize off something that doesn’t match contained in the field. However there’s an vital distinction: with clip, scrolling is totally disabled.

.field {
  width: 200px;
  peak: 100px;
  border: 2px stable black;
  overflow: clip; /* minimize it off, no scrolling attainable */
}

With hidden, the content material is clipped however you may nonetheless make it scrollable later by switching the property to scroll or auto. 

For instance

• A weblog publish preview that reveals the primary paragraph, with the remainder hidden till the reader clicks “Learn extra”

• A dropdown menu that hides objects till the person expands it

• A carousel the place solely the energetic picture is proven, and the others are clipped however nonetheless accessible by way of navigation

In all of those circumstances, the hidden content material remains to be there within the DOM, and also you’re making it accessible by way of some sort of interplay (button, hover, increasing).

With clip, you’re saying that

Why does this matter?

Properly, this makes clip barely extra environment friendly for the browser to render, particularly in massive layouts or when you may have many components on the web page. But it surely comes at the price of flexibility in that when it’s clipped, that content material is totally gone to the person.

overflow-x and overflow-y

Up up to now we’ve been controlling overflow in each instructions directly. However actual layouts don’t all the time work that manner. Generally you wish to enable scrolling in a single course, whereas fully blocking it within the different.

For instance

Take into consideration a chat app. Messages stack vertically, and also you need folks to scroll up and right down to see older conversations. But when a single lengthy phrase or emoji pushes the structure sideways, horizontal scrolling would break the expertise.

That’s the place overflow-x and overflow-y are available.

.chat-box {
  width: 300px;
  peak: 200px;
  border: 2px stable black;
  overflow-y: scroll;  /* enable vertical scrolling */
  overflow-x: hidden;  /* block horizontal scrolling */
}

Now, customers can scroll up and right down to see older messages, however they’ll’t by accident scroll sideways and push the structure round.

One other neat trick is that the overflow shorthand can take two values: the primary for x, the second for y. 

For instance

.chat-box {
  overflow: hidden scroll; /* x hidden, y scroll */
}

This retains your CSS concise whereas nonetheless providing you with nice management. 

The truth is, overflow-x and overflow-y are excellent when content material naturally flows in a single course (like chat messages, timelines, or lists) and also you don’t wish to take care of the opposite.

text-overflow

Generally the issue isn’t a picture or container in any respect, however textual content. Particularly, textual content that refuses to suit neatly within the house you’ve given it.

For instance

Think about a kind the place customers kind of their identify, or a file add the place the filename reveals in a small field. You’ll be able to’t predict how lengthy that textual content will probably be, and shrinking it responsively isn’t sensible. (Additionally, it will be unreadable).

Nevertheless, if the textual content overflows, then it both spills previous the field or will get minimize off mid-letter, each of which look damaged. 

That’s the place text-overflow is available in. It lets the browser exchange the overflow with one thing extra user-friendly.

.input-preview {
  width: 200px;
  white-space: nowrap;     /* hold it on one line */
  overflow: hidden;        /* conceal something that doesn’t match */
  text-overflow: ellipsis; /* present ... when textual content overflows */
}

Now if the person’s textual content is simply too lengthy, the browser reveals a clear ellipsis … on the finish. This indicators that the content material continues past the seen space, with out wrecking the structure.

That is particularly helpful in user-facing UIs like types, chat apps, or file lists, as a result of customers immediately see that they’ve hit a restrict and might trim or regulate their enter.

overflow-wrap

Generally textual content doesn’t overflow as a result of it’s lengthy in size, however as a result of it’s a single unbreakable phrase or string. 

For instance

Consider a extremely lengthy URL, a product code, or somebody pasting a large unspaced phrase right into a remark field.

By default, browsers attempt to hold phrases complete and so they received’t cut up them up. Meaning if a phrase is wider than its container, it simply bursts out the facet and breaks your structure.

That’s the place overflow-wrap is available in.

It tells the browser: “If a phrase is simply too lengthy to suit, go forward and break it onto the following line.”

.description {
  width: 250px;
  border: 1px stable black;
  overflow-wrap: break-word; /* enable lengthy phrases to wrap */
}

Now as a substitute of pushing previous the container, that lengthy URL will get neatly cut up throughout traces and all the things stays contained in the field.

That is most helpful for user-generated content material i.e. issues you possibly can’t management, like usernames, chat messages, or hyperlinks folks paste into types. Since you possibly can’t predict what they’ll kind, overflow-wrap: break-word makes certain their content material received’t wreck your design.

white-space

white-space is just about the alternative of overflow-wrap . As a substitute of letting textual content wrap, it controls whether or not wrapping can occur in any respect.

So why would we wish this?

For instance

By default, browsers will wrap textual content onto a brand new line when it hits the sting of its container. However for those who set white-space: nowrap, the textual content is pressured to remain on a single line, regardless of how lengthy it will get.

.nav-item {
  white-space: nowrap;
}

That is actually helpful in navigation bars or buttons the place you don’t need phrases splitting throughout two traces. For instance, a menu merchandise like “Contact Help” appears cleaner on a single line somewhat than breaking into “Contact” above “Help.”

The draw back is that nowrap can create horizontal overflow, because the textual content received’t break itself. That’s why it’s typically mixed with overflow: hidden and text-overflow: ellipsis so the additional textual content is clipped cleanly with an ellipsis as a substitute of spilling into the structure.

So whereas overflow-wrap ensures issues

Time to tidy up your individual UI

In order you possibly can see, with the precise overflow property (or mixture), you possibly can hold your structure working precisely as supposed. 

No extra cut-off pictures or textual content breaking out of packing containers!

The trick to studying this, in fact, is to attempt it out. So go forward and provides it a go in your subsequent mission, and also you’ll see how a lot cleaner and smoother your designs really feel.

P.S.

Bear in mind, if you wish to be taught extra about CSS + HTML, then check out my complete CSS course:

You’ll be taught all the things from CSS fundamentals to superior CSS strategies by finishing 100+ workouts and initiatives. You may additionally learn to use CSS to create stunning, responsive web sites that wow customers and employers. 

Even higher?

When you be a part of, you’ll get access to our private Discord community, the place you possibly can ask questions and get solutions from me, different college students, and different working tech professionals.