CSS Overflow
The CSS overflow property helps control what happens when content doesn’t
fit inside its container.
In web design, every element on a page is a rectangular box. These boxes are
styled and managed using CSS to define their size, position, and behavior.
By default, if you don’t set a height for a box, it will expand to fit its
content. However, if you set a fixed height or width, the content might not
always fit inside. When this happens, the overflow property determines how
to handle the extra content. You can choose to clip it, show a scroll bar,
or let the content extend outside the container.
CSS Overflow Property Values
The CSS overflow property can have different values, each controlling how
overflowing content is handled. These values are explained in the table
below:
Illustrations of the CSS Overflow Property
We will understand the CSS overflow property through examples.
Illustration 1:
In this example, we will apply the CSS overflow property to a <p>
element and set its value to "visible."
Code:
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Example: 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>CSS Overflow Property: Value
"visible"</h2>
<h3>overflow: visible</h3>
<p>The CSS `overflow` property is
set to "visible" in this example. If the content exceeds the container's
boundaries, it will still be visible outside the container.</p>
</body>
</html>
Output
Here is the output showing that the text inside the <p> element
overflows its container. Since the CSS overflow property is set to
"visible," the extra content appears outside the container.
.png)
Illustration 2:
In this example, we will apply the CSS overflow property to a <div>
element and set its value 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>Example: CSS Overflow
Property with "hidden" Value</title>
<style>
div {
background-color:
peru;
width:
125px;
height:
55px;
border:
1px solid black;
overflow:
hidden;
}
</style>
</head>
<body>
<h2>Using the CSS Overflow
Property with the "hidden" Value</h2>
<h3>overflow: hidden</h3>
<div>The CSS `overflow` property
is set to "hidden" in this example.</div>
</body>
</html>
Output
In the output, we can see that any text inside the <div> element that
exceeds the container's boundaries is hidden because the overflow property
is set to "hidden."
.png)
Illustration 3:
In this example, we will apply the CSS overflow property to a <div>
element and set its value 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>Example: 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>Using the CSS Overflow
Property with the "scroll" Value</h2>
<h3>overflow: scroll</h3>
<div>The CSS `overflow` property
is set to "scroll" in this example.</div>
</body>
</html>
Output
In the result, we can see that when the text inside the <div> element
overflows, both vertical and horizontal scrollbars appear, allowing the user
to scroll and view the entire content.
.png)
Illustration 4:
In this example, we will apply the CSS overflow property to <p>
elements and set its value to "auto."
Code:
<!DOCTYPE
html>
<html lang="en">
<head>
<title>Example: 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>Using the CSS Overflow
Property with the "auto" Value</h2>
<h3>overflow: auto</h3>
<p class="paragraph-1">The width
is set to 125px, and the CSS `overflow` property is set to "auto".</p>
<p class="paragraph-2">The width
is set to 200px, and the CSS `overflow` property is set to "auto".</p>
</body>
</html>
Output
In the result, we can see that when the width of paragraph-1 is set to 125px
and the text overflows, a vertical scrollbar appears. However, when the
width of paragraph-2 is set to 150px, the content fits within the container
without overflowing.
.png)
Illustration 5:
In this example, we will apply the CSS overflow property to a <p>
element and set its value to "clip."
Code:
<!DOCTYPE
html>
<html lang="en">
<head>
<title>Example: 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>Using the CSS Overflow
Property with the "clip" Value</h2>
<h3>overflow: clip</h3>
<p>The CSS `overflow` property is
set to "clip" in this example.</p>
</body>
</html>
Output
In the result, we can see that when the content inside the <p> element
exceeds the container, it gets clipped.
.png)
Illustration 6:
In this example, we will apply the CSS overflow property to HTML elements
and set its value 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>Example: CSS Overflow
Property with "initial" and "inherit" Values</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>Using the CSS Overflow
Property with "initial" and "inherit" Values</h2>
<h3>overflow: initial</h3>
<p class="p1">The CSS `overflow`
property is set to "initial" in this example.</p> <br>
<h3>overflow: inherit</h3>
<p class="p2">The CSS `overflow`
property is set to "inherit" in this example.</p>
</body>
</html>
Output
In the result, we can see that when the text inside the first and second
paragraphs overflows, the extra content remains visible.
.png)
Browser Compatibility
The following browsers support the CSS overflow property:
- Google Chrome
- Safari
- Opera
- Firefox
- Microsoft Edge
Conclusion
In this article, we have learned about the CSS overflow property. We
explored how it can take different values, such as visible, hidden, scroll,
auto, clip, initial, and inherit. These values help manage content that
overflows its container.
