CSS Overflow
Last Updated :
04 Apr, 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:Â 
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>
Output:Â
Supported Browser:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 7
- Safari 1
Share your thoughts in the comments
Please Login to comment...