CSS Overflow Property with Examples

April 27, 2020

CSS Overflow Property

The CSS overflow property controls what happens to content that is too big to fit into an area. 

Understanding how overflow behaves is important in dealing with any element with a constrained size in CSS.

The overflow property specifies what to do when the content is too big. Whether to clip the content, hide it or to add scrollbars to fit in the specified area, we can tell CSS what to do.

We can set it using 4 ways and 2 addition options for scrolling as well.

1. visible

It’s a default option. The overflow is not clipped. The content renders outside the element’s box.

How to use it?

  overflow: visible;

The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the overflow property which has an initial value of visible. This is why we can see the overflow content.

2. hidden

The overflow is clipped, and the rest of the content will be invisible.

How to use it?

  overflow: hidden;

To hide overflowing content use a value of hidden. This may cause some of your content to not be visible.

3. scroll

When you add scroll in overflow property, the overflow is clipped, and a scrollbar is added to see the rest of the content.

How to use it?

  overflow: scroll;

Using a value of scroll contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.

4. auto

It is similar to scroll, but it adds scrollbars only when necessary.

How to use it?

  overflow: auto;

Using a value of auto will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added.

scroll you should see overflow scroll has horizontal and vertical scrollbars when it only needs vertical scrolling. The auto example below only adds the scrollbar in the direct we need to scroll.

Additional 2: overflow-x and overflow-y

The overflow property is in reality a shorthand for the  overflow-x and  overflow-y properties.

If you specify only one value for overflow, this value is used for both axes.

However, you can specify both values in which case the first is used for overflow and therefore the horizontal direction, and the second for overflow-y and the vertical direction.

How to use it?

  overflow-x: hidden;
  overflow-y: scroll;

In the demo example, I have only specified overflow-y: scroll so we do not get the unwanted horizontal scrollbar.

Additional Resources


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

Can We Use For Loop to Loop Through Associative Arrays in PHP?PHPRBV Framework and closing of big brandsMiscHow to use data-* Attributes in HTML?HTMLWhat is Git?MiscHAVING Clause in Postgres with Examples in All Aggregate FunctionsPostgresHow to add onclick event to html elements dynamically using JavaScript?JavaScript