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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
AND, OR and NOT boolean operators in Envision BasicEnvision BasicLearn to make a responsive gallery using CSS Grid and without media queriesCSSSQL Right JoinSQL/MySQLNew to  Drupal? Here’s What You Need to KnowDrupalHow to add and remove list items using JavaScript?JavaScriptAlways add associated labels to your Form elementsUI/UX