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.

CSS overflow example
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.

Example

.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.

Example

.hidden{
    overflow: hidden;
}
Try it

Output:


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.

Example

.scroll {
    overflow: scroll;
}
Try it

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.

Example

.auto{
    overflow: auto;
}
Try it

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.

Example

.x {
    overflow-x: hidden;
}

.y {
    overflow-y: scroll;
}
Try it