CSS Overflow
The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars.
Try It:
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
CSS Overflow – FAQs
What is the CSS overflow property?
The overflow property in CSS controls what happens to content that is too large to fit into an element’s box. It determines whether to clip the content, add scrollbars, or let it overflow outside the box.
How do overflow-x and overflow-y differ from overflow?
overflow-x and overflow-y control the overflow behavior on the horizontal and vertical axes, respectively. They can take the same values as overflow (visible, hidden, scroll, auto, inherit).
What is the default value of the overflow property?
The default value of overflow is visible.
Can I use overflow with flexbox or grid layout?
Yes, you can use overflow with both flexbox and grid layouts to control the overflow behavior of flex or grid items.
What happens if I set overflow to hidden and the content is too large?
If overflow is set to hidden, the content that exceeds the dimensions of the element’s box will be clipped and will not be visible.
