CSS Overflow: What It Is & How It Works

CSS gives you precise control over how your content appears on a web page. One CSS property, overflow, is key for front-end programmers to know, since it can cause your content to look messy or even unreadable if left unchecked in some situations.

In this post, we’ll explain what overflow is in CSS. Then, we’ll explain how to control it with the following CSS properties:

• overflow
• overflow-x
• overflow-y
• overflow shorthand
• overflow-wrap
• text-overflow

What is overflow in CSS?

In CSS, overflow occurs when an element’s content does not fit entirely inside the element box. This can happen when an element has a specified height that’s too small for the content it contains. You can use the CSS overflow property to control what happens to the overflow.

Before we look at the overflow property, let’s clarify what we meant by the “element box.” According to the CSS box model, a box is generated for HTML elements. This box comprises four layers: the content itself, the padding, the border, and the margin.

When the content of an HTML element extends beyond any of the box’s edges — whether that’s the content edge, padding edge, border edge, or margin edge — it is called overflow.

CSS Overflow Property

The CSS overflow property has several ways to control overflow. Let’s take a closer look at its values.

CSS Overflow Visible

Visible means that the overflowing content will not be clipped. Instead, it will render outside the element’s box and may overlap with other elements on the page. This is the default value of the overflow property.

See the Pen css overflow: visible by HubSpot (@hubspot) on CodePen.

CSS Overflow Hidden

To prevent overflow from rendering outside the element’s box, you can set the overflow property to hidden. This will clip the content at the box’s padding edge. Also, it will not allow the user to view the content beyond the padding edge by scrolling.

See the Pen css overflow: hidden by HubSpot (@hubspot) on CodePen.

Note that this value still allows programmatic scrolling, which means the box is technically a scroll container. A user could use the mechanisms defined by the CSSOM View Module, for example, to see the hidden content.

CSS Overflow Scroll

To hide overflow from rendering outside the element’s box while enabling users to view that content, set the overflow property to “scroll.” The overflow will still be clipped at the box’s padding edge. However, a scrollbar is be added so users can scroll to see the content that’s not currently visible.

See the Pen css overflow: scroll by HubSpot (@hubspot) on CodePen.

CSS Overflow Auto

The “auto” value is similar to scroll, but adds a scrollbar only if the box has overflow.

In the example below, both divs are defined have an overflow value of auto, but only the second div has scrollable overflow and a scrollbar.

See the Pen css overflow: auto by HubSpot (@hubspot) on CodePen.

CSS Overflow-x

Instead of using the overflow, you can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically.

The overflow-x property controls horizontal overflow – in other words, overflow from the left and right of an element’s box.

In this example, overflow-x is set to scroll so you can scroll from left to right to view the image. But overflow-y is set to hidden so you can't scroll up and down.

See the Pen css overflow: overflow-x by HubSpot (@hubspot) on CodePen.

CSS Overflow-y

The overflow-y property controls vertical overflow, which is overflow from the top and bottom of an element’s box.

In this example, overflow-y is set to scroll and overflow-x is set to hidden this time.

See the Pen css overflow: overflow-y by HubSpot (@hubspot) on CodePen.

CSS Overflow Shorthand

You can also use the shorthand overflow property instead of defining both the overflow-x and overflow-y properties. If two values are specified, the first represents the value of overflow-x and the second for overflow-y, shown below:

See the Pen css overflow: shorthand by HubSpot (@hubspot) on CodePen.

If there is only one value, it applies to both the overflow-x and overflow-y properties. For example, if I defined the div containing the image with overflow: scroll; then the image could be scrolled horizontally and vertically.

CSS Overflow Wrap

The CSS overflow-wrap property specifies the circumstances when the browser breaks a line of text onto multiple lines. Without this property, a string of text that is too long to fit within the line box would be unbreakable and cause overflow.

To use overflow-wrap, the white-space property must allow wrapping. That means the white-space property must be set to “normal,” “pre-wrap,” and “break-spaces,” or “pre-line.” Most often you’ll see it set to “normal.”

The overflow-wrap property can take three values: normal, anywhere, or break-word.

CSS Overflow Wrap Normal

When overflow-wrap is set to normal, a line of text will only break at unforced break points, like the space between two words.

See the Pen css overflow: overflow-wrap: normal by HubSpot (@hubspot) on CodePen.

CSS Overflow Wap Anywhere

When the anywhere value is applied, lines may break at forced break points if there are no unforced ones.

For example, a long word or URL may be broken to wrap on another line. No hyphen is inserted at the break point.

With this value, opportunities to minimize the amount of content overflowing a line by wrapping the line at breakpoint are considered when calculating min-content intrinsic sizes (the smallest size a box could take without causing overflow).

See the Pen css overflow: overflow-wrap: anywhere by HubSpot (@hubspot) on CodePen.

CSS Overflow Wap Break Word

If the break-word value is used, lines may break at forced break points if there are no unforced ones. No hyphen is inserted at the break point.

However, opportunities to minimize the amount of content overflowing a line by wrapping the line at breakpoint are not considered when calculating min-content intrinsic sizes (in other words, the smallest size a box could take without causing overflow).

See the Pen css overflow: overflow-wrap: break-word by HubSpot (@hubspot) on CodePen.

CSS Text Overflow

The CSS text-overflow property controls how inline content that overflows its container element is rendered on the page.

To use the CSS text-overflow property, the block container element must be defined by the overflow property with a value other than visible. Most often, it will be defined by “overflow: hidden.” The container must also be defined by the white-space property and set to “nowrap.” Otherwise, the inline content will wrap to the next line, instead of clipping.

There are two CSS text-overflow property values, clip and ellipsis.

CSS Overflow Clip

Setting the CSS text-overflow property to “clip” will clip the inline content that overflows its block container element at the padding edge. Visitors will not be able to see content beyond the edge where it’s clipped.

This is similar to the “hidden” value for the CSS overflow property. The difference is that clip forbids scrolling of any kind, including programmatic scrolling. That means the element’s box is not a scroll container.

See the Pen css overflow: text-overflow: clip by HubSpot (@hubspot) on CodePen.

CSS Overflow Ellipsis

Using the ellipsis value will cut the inline content that overflows its block container element at the padding edge, and a little extra to fit the ellipsis.

his value also forbids any scrolling, including programmatic scrolling, which tells the browser that the element’s box is not a scroll container. Visitors will not be able to see content beyond the edge where it’s clipped.

See the Pen css overflow: text-overflow: ellipsis by HubSpot (@hubspot) on CodePen.

Control overflow in your layouts with CSS.

Overflow is a common issue that you’ll likely run into either creating layouts from scratch or customizing pre-designed ones. Understanding how to control it will ensure you can create and customize your layouts without compromising on alignment or positioning. Thankfully, you only need some basic web design knowledge to do so.

Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.