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 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.
Output:
Overflow hidden
When the overflow property is set to hidden, the content is clipped and no scrollbars are provided.
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.
Output:
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:
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.