CSS overflow

The overflow represents the flow of the content outside of the content's area. The content may float outside of the conent's area or may be invisible.

overflow values

There are many values of this property. All of the values have been described with the examples.

visible

If the content flows outside of the box, then it is visible. It is default property.

Example

overflow:visible;

The overflow property is visible even outside the box.

The content can be seen even outside the box.

hidden

In this case, if the content flows outside of the box, then it becomes invisible.

Example

overflow:hidden;

The overflow property is visible even outside the box.

The content can not be seen in this case that flows outside of the box.

scroll

If the content is larger than the box, then we can see the content using scroll bar.

Example

overflow:scroll;

The overflow property is visible even outside the box.

In this case, we can see the scroll bar area along x and y axes even if the text is not present.

auto

In this case, the scroll bar appears only when the text overflows. While in the case of overflow:scroll, the scroll bar area is always present.

Example

overflow:auto;

The overflow property is visible even outside the box.

In the above example, when the text overflows then a vertical scroll bar appears that we use to see the rest content.

Next Previous