Overflow in CSS
On a web page, we can have a lot of content. Sometimes, the content may be more than the size of the container. In such cases, the content will overflow the container.
The content that overflows the container is hidden by default. We can change this behavior using the overflow property.
Change the values from options to see the effect. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
CSS overflow values
| Value | Description |
| visible | Default value. Content is not clipped, it may be rendered outside the element's box. |
| hidden | Content is clipped and no scrollbars are provided. |
| scroll | Content is clipped and scrollbars are provided. |
| auto | It also provides a scroll bar like the above property but in this scroll bar is provided only when it's necessary. |
1. Overflow visible
By default, the overflow property is set to visible. This means that the content is not clipped, it may be rendered outside the element's box.
.visible {
overflow: visible;
}
▶ Try it
Output:
The content overflow and the content is visible outside the box.Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequatur mollitia enim quia et Itaque consequatur mollitia incidunt esse nihil dolore excepturi iste, nostrum amet quaerat cupiditate nisi dolor, exercitationem numquam!
Overflow hidden
When the overflow property is set to hidden, the content is clipped and no scrollbars are provided.
Output:
The content overflow and the content which is outside the box is hidden.Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequatur mollitia enim quia et incidunt esse nihil dolore excepturi iste, nostrum amet quaerat cupiditate nisi dolor,nostrum amet quaerat cupiditate exercitationem numquam!
Overflow scroll
The overflow scroll value clips the content but extra content is visible by a scroll bar that is generated.
The scroll bar can be horizontal or vertical.
Output:
The content overflows and the content which is outside the box can be seen by scrolling.Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequatur mollitia enim quia et incidunt esse nihil dolore excepturi iste, nostrum amet quaerat cupiditate nisi dolor, exercitationem numquam!
Overflow auto
If the overflow is clipped then auto value creates a scroll to make overflowed content visible.
The scroll bar created by auto can be horizontal or vertical.
Output:
The content overflows and the content which is outside the box can be seen by scroll created by auto value.Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, eligendi fugiat. Labore facereprovident dicta voluptatibus ea obcaecati quas asperiores hic, rem praesentium adipisci aliquid nisi. Rerum reprehenderit dolores laborum.
Overflow x and y
The overflow-x and overflow-y properties let us control the overflow of content in the x and y directions separately.
To control the overflow of content in the x direction, we use the overflow-x property.
To control the overflow of content in the y direction, we use the overflow-y property.
.x {
overflow-x: hidden;
}
.y {
overflow-y: scroll;
}
▶ Try it
