CSS Overflow
Advertisements
CSS Overflow
CSS overflow property used to handle the content when it overflows its block level container.
Why need of Overflow ?
Suppose if you do not set the height and width of any box then it goes larger as content, but if you do not set height or width of box but content can not fit inside box then it goes overflow. The CSS overflow property is used to overcome this problem.
CSS Overflow property values
| Values | 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. |
| initial | It is used to set the property to its initial value. |
| inherit | It inherits the property from its parent element. |
Example: Overflow
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: cyan;
width: 100px;
height: 150px;
overflow: scroll;
}
div.hidden {
background-color: pink;
width: 100px;
height: 150px;
overflow: hidden;
}
div.hidden {
background-color: yellow;
width: 100px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>overflow:scroll</p>
<div class="scroll">
If contents goes out the container then
scroll bar is used to see the rest of the content.
</div>
<p>overflow:hidden</p>
<div class="hidden">
It specifies that the overflow is clipped,
and rest of the content will be invisible.
</div>
<p>overflow:auto</p>
<div class="auto">
It specifies that if overflow is clipped,
a scroll bar is needed to see the rest of the content.
</div>
</body>
</html>
Result
overflow:scroll
If contents goes out the container then scroll bar is used to see the rest of the content.
overflow:hidden
It specifies that the overflow is clipped, and rest of the content will be invisible.
overflow:auto
It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
Google Advertisment