CSS Overflow

CSS Overflow is a property that determines what happens to the content of an element when it exceeds the size of its container.

It can be used to control the behavior of overflowing content in both block and inline-level elements.

The overflow property can take one of four values:

The overflow: visible Property

This is the default value, and it allows the content to overflow the container.

This means that content will be visible outside the boundaries of the container.

As an example:

Editor

Loading...

In this example:

• We have a container with a fixed width and height of 200 pixels and a solid black border.
• The overflow property is set to visible, which means that any content that exceeds the size of the container will be visible outside of it.
• Inside the container, we have a content div with a width and height of 300 pixels and a background color of pink.
• Because the content div is larger than the container, it overflows outside of it and is visible.

The overflow: hidden Property

This value hides the overflowing content and clips it to the size of the container. The content that exceeds the size of the container will be hidden.

As an example:

Editor

Loading...

In this example:

• We have a container with a fixed width and height of 200 pixels and a solid black border.
• The overflow property is set to hidden, which means that any content that exceeds the size of the container will be hidden and clipped to the size of the container.
• Inside the container, we have a content div with a width and height of 300 pixels and a background color of pink.
• Because the content div is larger than the container, it overflows outside of it.
• The container has the overflow: hidden property, the overflowing content is hidden and clipped to the size of the container.

The overflow: scroll Property

This value adds a scrollbar to the container, allowing users to scroll to see the overflowing content.

As an example:

Editor

Loading...

In this example:

• We have a container with a fixed width and height of 200 pixels and a solid black border.
• The overflow property is set to scroll, which means that any content that exceeds the size of the container will add a scrollbar to the container, allowing users to scroll to see the overflowing content.
• Inside the container, we have a content div with a width and height of 300 pixels and a background color of pink.
• Because the content div is larger than the container, it overflows outside of it.
• The container has the overflow: scroll property, a scrollbar is added to the container, allowing the user to scroll to see the overflowing content.

The overflow: auto Property

This value automatically adds a scrollbar to the container only if the content overflows.

As an example:

Editor

Loading...

In this example:

• We have a container with a fixed width and height of 200 pixels and a solid black border.
• The overflow property is set to auto, which means that a scrollbar will be added to the container only if the content exceeds the size of the container.
• Inside the container, we have a content div with a width and height of 300 pixels and a background color of pink.
• Because the content div is larger than the container, it overflows outside of it.
• Because the container has the overflow: auto property, a scrollbar is added to the container, allowing the user to scroll to see the overflowing content.

tip

You can set the overflow property on any block or inline-level element, including div, span, img, and others.