CSS Overflow
Last Updated :
24 Jul, 2024
Improve
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
1
2
3
4
5
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.
<!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.
<!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.
<!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
- Firefox 1
- Opera 7
- Safari 1
