CSS Overflow

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

<!DOCTYPE>
<html>

<head>
    <style>
        p {
            width: 100px;
            height: 80px;
            border: 1px solid;
            overflow: visible;
        }
    </style>
</head>

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

</body>

</html>

Output:

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

html

<!DOCTYPE>
<html>

<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <h2>
        GEEKSFORGEEKS
    </h2>

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

</body>

</html>

Output: scroll

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

html

<!DOCTYPE>
<html>

<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h2>
        GEEKSFORGEEKS
    </h2>

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

</body>

</html>