YogeshChauhan . com

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

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to enable and disable button using JavaScript?JavaScriptHow To Create a Fullscreen Background Video using CSS and JavaScript?CSSHow to remove N/A from Radio Button list in Drupal?DrupalWhat is Hadoop and Hadoop Ecosystem?MiscCheck If a String Contains a Specific Word in PHPPHPConditional operator in JavaScript (aka ternary operator)JavaScript