CSS Overflow

CSS overflow controls how content is handled when it doesn’t fit inside an element’s box. It helps manage scrolling and visibility of extra content.

• Can hide, scroll, or show overflowing content.
• Common values include visible, hidden, scroll, and auto.
• Useful for keeping layouts neat and preventing content overlap.

overflow: hidden; 

Now let's understand this with the help of example:

• The overflow: auto; property adds a scrollbar when the content is larger than the box.
• The box has a fixed width and height with a black border.
• Extra text can be viewed by scrolling inside the box.

Syntax:

overflow: visible | hidden | scroll | auto;

Property Values

The overflow property contains the following values: 

• visible: The content is not clipped and is visible outside the element box. 
• hidden: The overflow is clipped and the rest of the content is invisible.
• scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical. 
• auto: It automatically adds a scrollbar whenever it is required.

overflow-x and overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges. 

CSS Overflow Examples

Example 1:  Here, we are using overflow: visible; property.

Example 2: Here, we are using overflow: scroll; property.

Example 3: Here, we are the overflow: auto; property.