Yogesh Chauhan's Blog

CSS Overflow Property with Examples

in CSS on 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: scroll;

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: hidden;

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.

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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to make a Custom Login Page in WordPress?WordPressHow to convert a number rounding to a specified number of decimals in JavaScript?JavaScriptHow to add a Pie Chart in Angular App?AngularHow to add a Bar Chart in Angular App?AngularHow to get user’s Browser and Operating Systems information using PHP?PHPHow to create a flip pricing table using CSS and JavaScript?CSS