CSS Overflow (original) (raw)

Last Updated : 24 Jul, 2024

The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars.

Try It:

Overflow Visible

Overflow Hidden

Overflow Auto

Overflow Scroll

**Currently Active Property:

overflow: hidden;

**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: In this example, we are using **overflow: visible; property.

html `

GEEKSFORGEEKS

The CSS overflow controls big content. It tells whether to clip content or to add scroll bars.

**Output:

**Example 2: In this example, we are using **overflow: scroll; property.

html `

GEEKSFORGEEKS

<p>
    The CSS overflow controls big content.
    It tells whether to clip content or
    to add scroll bars.
</p>

**Output: scroll

**Example 3: In this example, we are the **overflow: auto; property.

html `

GEEKSFORGEEKS

<p>
    The CSS overflow controls big content.
    It tells whether to clip content or
    to add scroll bars.
</p>

**Output:

**Supported Browser:

Google Chrome 1
Edge 12
Firefox 1
Opera 7
Safari 1