CSS Overflow

The "Overflow" is the CSS property that we will understand in this article.

The CSS overflow property specifies how to handle the content when it overflows its block level container.

Every element on a page is a rectangular box, and the size, positioning, and behavior of these boxes are controlled via CSS.

For example, if you don't set the height of the box, it will grow as large as the content. But if you set a specific height or width of the box, then the content may or may not fit inside the container. If the content fits in the container, then it is good, but if it does not fit, then the CSS overflow property is used to overcome this problem, which specifies whether to clip the content, render a scroll bar, or display the content.

CSS Overflow Property Values

There are various values that the CSS overflow property can take. The values are described below in the table:

Value	Description
visible	It specifies that overflow is not clipped and renders the element outside its box. It is the default value of the CSS overflow property.
hidden	It specifies that the overflow is clipped, and rest of the content will be invisible.
scroll	It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
Clip	It specifies that if overflow is clipped, then the rest of the content will be clipped.
auto	It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
inherit	It inherits the property from its parent element.
initial	It is used to set the property to its initial value.

Illustrations of the CSS Overflow Property

We will comprehend the CSS overflow property with the help of illustrations.

Illustration 1:

We will be utilizing the overflow CSS property on the <p> element in this illustration.
We will specify the value of the CSS overflow property to be "visible".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Illustration of the CSS overflow property with "visible" value</title>
    <style>
        p {
            background-color: plum;
            width: 125px;
            height: 55px;
            border: 1px solid black;
            overflow: visible;
}
    </style>
</head>
<body>
    <h2>Use of the CSS overflow property when the value is set to "visible"</h2>
    <h3>overflow: visible</h3>
    <p>We have utilized the CSS overflow property with a "visible" value. Even if the content overflows the boundary of the container, then the content will still be visible outside the boundary of the container.</p>
</body>
</html>

Output:

Here is the output where we can witness that the text written under the <p> element is overflowed. Because we have set the overflow CSS property to "visible" that is why the content is visible outside the container.

Illustration 2:

We will utilize the CSS overflow property to the <div> element in this illustration, and we will place the value of the CSS overflow property to "hidden".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo of the CSS overflow property with the value "hidden"</title>
    <style>
        div {
            background-color: peru;
            width: 125px;
            height: 55px;
            border: 1px solid black;
            overflow: hidden;
}
    </style>
</head>
<body>
    <h2>Utilization of the CSS overflow property when the value is specified to "hidden"</h2>
    <h3>overflow: hidden</h3>
    <div>We have utilized the CSS overflow property and allotted it a value "hidden".</div>
</body>
</html>

Output:

Here, in the output, we can witness that the text written inside the <div> element has been hidden when the content overflows the boundaries of a container.

Illustration 3:

We will utilize the CSS overflow property on the <div> element in this illustration.
We will be putting the value of the CSS overflow property to "scroll".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demonstration of the CSS overflow property with "scroll" value </title>
    <style>
        div {
            background-color: khaki;
            width: 125px;
            height: 100px;
            border: 1px solid black;
            overflow: scroll;
}
    </style>
</head>
<body>
    <h2>Utilization of the CSS overflow property when the value is set to "scroll"</h2>
    <h3>overflow: scroll</h3>
    <div>We have made the utilization of the CSS overflow property and allotted it a value that is "scroll".</div>
</body>
</html>

Output:

Here is the outcome in which we can witness that when the text written under the <div> element overflows, then the vertical and horizontal scroll bar emerges, which the user can scroll to read the whole content.

Illustration 4:

We will make the utilization of the CSS overflow property on <p> elements in this illustration.
We will be putting the value of the CSS overflow property to "auto".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demo of the CSS overflow property with "auto" value</title>
    <style>
        .paragraph-1 {
            background-color: lightcoral;
            width: 125px;
            height: 55px;
            border: 1px solid black;
            overflow: auto;
        }
        .paragraph-2 {
            background-color: lightcoral;
            width: 200px;
            height: 82px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h2>Utilization of the CSS overflow property when the value is set to "auto"</h2>
    <h3>overflow: auto</h3>
    <p class="paragraph-1">We have specified the width to 125px and utilized the CSS overflow property by giving it a value of "auto".</p>
    <p class="paragraph-2">We have defined the width to 150px and utilized the CSS overflow property by assigning it a value to "auto".</p>
</body>
</html>

Output:

Here is the outcome in which we can witness that when the width of paragraph-1 is set to 125px, and the text written inside paragraph-1 overflows, then the vertical scroll bar emerges, but when the width of paragraph-2 is set to 150px, then the content inside the paragraph-2 fits in the container.

Illustration 5:

We will utilize the CSS overflow property on the <p> element in this illustration.
We will set the value of the CSS overflow property to "clip".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of CSS overflow property with "clip" value</title>
    <style>
        p {
            background-color: orange;
            width: 150px;
            height: 55px;
            border: 1px solid black;
            overflow: clip;
        }
    </style>
</head>
<body>
    <h2>Utilization of the CSS overflow property when the value is set to "clip"</h2>
    <h3>overflow: clip</h3>
    <p>We have utilized the CSS overflow property and assigned it the value "clip".</p>
</body>
</html>

Output:

Here is the result in which we can witness that when the content under the <p> element exceeds the container, then the content is clipped.

Illustration 6:

We are going to utilize the CSS overflow property on the HTML elements in this illustration.
We will specify the value of the CSS overflow property to "initial" and "inherit".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Illustration of CSS overflow property with "initial" and "inherit" value</title>
    <style>
        .p1 {
            background-color: honeydew;
            width: 125px;
            height: 55px;
            border: 1px solid black;
            overflow: initial;
        }
        .p2 {
            background-color: orange;
            width: 150px;
            height: 55px;
            border: 1px solid black;
            overflow: inherit;
        }
    </style>
</head>
<body>
    <h2>Use of the CSS overflow property when the value is set to "initial" and "inherit"</h2>
    <h3>overflow: initial</h3>
    <p class="p1">We have utilized the CSS overflow property and provided it with the value "initial".</p> <br>
    <h3>overflow: inherit</h3>
    <p class="p2">We have utilized the CSS overflow property and provided it with the value "inherit".</p>
</body>
</html>

Output:

Here is the outcome in which we can witness that when the text written inside the first paragraph and second paragraph overflows, then the exceeded content is visible.

Browser Compatibility

Following are the browsers that support the CSS overflow property:

Google Chrome
Safari
Opera
Firefox
Microsoft Edge

Conclusion

We have understood the CSS overflow property in this article. We have comprehended that the CSS overflow property can take various values such as visible, hidden, scroll, auto, clip, initial and inherit. These values help to handle the content that has overflowed the container.

Next TopicCSS Padding

← prev next →