It specifies how to handle the content when it overflows its block level container. It controls what happens to content that is too big to fit into an area.
CSS Overflow property values
| Value |
Description |
| visible |
It specifies that overflow is not clipped. it renders outside the element's box.this is a default value. |
| 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. |
| 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. |
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Overflow</title>
<style>
div.hidden {
background-color: #d5ffff;
width: 100px;
height: 100px;
overflow: scroll;
}
div.scroll {
background-color: #e4ffe4;
width: 100px;
height: 170px;
overflow: hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout.
The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout.
The default value is visible.</div>
</body>
</html>
