CSS Overflow

The CSS overflow property is applied on block level elements, usually on div containers. It manages the extra content that gets overflowed from the container if there is not enough space.

you have a div container of fixed height and width with some content inside it. The content is bigger than the available space in the container and it is coming out of the div. You cannot increase the height or width of the container because it will disturb the website's layout. Now in this situation, when you cannot alter the parent element's dimensions to contain the data, CSS Overflow property is used.

CSS Overflow Properties

The overflow properties gives different options to manage the content overflow. You can choose any one of them for a container as per requirements:

CSS Overflow Visible

CSS Overflow Visible property is the default one. It is automatically applied by the browser when overflow is detected. The Overlow visible property doesn't help at all, it makes the content overflow visible to the user. It means that, it doesn't clip the overflowed content. Let's see an example of overflow:visible

Output

In the output above, you can see that the overflowed content is visible outside the dimensions of the container. As overflow:visible is the default property, even if you don't apply it, the output will be same.

CSS Overflow Hidden

The Overflow Hidden property hides the overflowed content. If the content goes outside the dimensions of the container then it gets clipped and hidden.

Using Overflow Hidden can result in loss of information. As the overflowed content is clipped, users can only read the visible part of the content that is inside the container. They cannot access or read whatever is hidden due to overflow.

Let's look at the example of overflow:hidden:

Output

As you can see in the output, the overflowed text is hidden. Whatever the container is not able to contain, gets hidden. But, as discussed above, the problem of loss of information is there. It can be avoided by using the next property.

CSS Overflow Scroll

CSS overflow scroll adds scroll bars in the container. It sets a scroll bar inside the box. The scroll bar will always be visible even when there is no overflow.

The problem with overflow:scroll is that the scroll bars will always be visible. It doesn't look good, if you don't have content overflow then the scroll bars should be hidden. This shortcoming gets solved in overflow:auto, but first look at the example of overflow scroll.

Output

CSS Overflow Auto

CSS overflow auto is an improvement over overflow:scroll. In this property, the scroll bars will only be visible inside the container if there is an overflow. If no overflow is detected the the sidebars are hidden. Look at the example below to understand how it works:

Output

As you can see in the example above, the same overflow:auto is applied to both the divs. Only that div has the scroll bars visible that contain overflow. The other div has no scroll bars because the content fits inside the container.

Overflow-x and Overflow-y

The overflow-x and overflow-y properties manages the horizontal and vertical axis' overflow respectively.

If you only want to manage the horizontal overflow then use overflow-x and for vertical overflow use overflow-y. All the above values visible, hidden, auto and scroll can be used with both the properties.

Note: The overflow property manages both the horizontal and vertical overflow. In all the example we have given, we only used text as overflowed content. You should remember that text only overflows in the vertical axis, that's why only vertical scroll bar is visible in the examples above.