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
In this example:
- We have a container with a fixed
width
andheight
of200
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 bevisible
outside of it. - Inside the container, we have a content div with a
width
and height of300
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
In this example:
- We have a container with a fixed
width
andheight
of200
pixels and a solid black border. - The
overflow
property is set tohidden
, 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
andheight
of300
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
In this example:
- We have a container with a fixed
width
andheight
of200
pixels and a solid black border. - The
overflow
property is set toscroll
, 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
andheight
of300
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
In this example:
- We have a container with a fixed
width
andheight
of200
pixels and a solid black border. - The
overflow
property is set toauto
, 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
andheight
of300
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.
You can set the overflow property on any block or inline-level element, including div, span, img, and others.