Overflow
Learn how to control content that is too large to fit inside an element's designated space.
What is the Overflow Property?
The CSS `overflow` property controls what happens when content is too big to fit into an element's content area. This is a common situation, especially with text that needs to fit into a fixed-size container. The `overflow` property, along with its related properties `overflow-x` and `overflow-y`, provides several ways to manage this.
Managing overflow is key to maintaining clean layouts and ensuring a good user experience, as it prevents content from unexpectedly spilling out and disrupting other elements on the page.
Overflow Property Values
There are four main values for the `overflow` property:
visible (Default)
The overflowing content is not clipped and is rendered outside the element's box. It's as if the overflow property isn't even set.
hidden
The overflowing content is clipped and the rest of the content is hidden. No scrollbars are provided to view the hidden content.
scroll
The overflowing content is clipped, but scrollbars are added to the element so that the user can scroll to see the rest of the content. Scrollbars are always visible, even if the content does not overflow.
auto
The overflowing content is clipped, but scrollbars are added only when necessary. This is the most common and user-friendly option for scrollable content.
Live Example
The following containers all have a fixed size, but they use different `overflow` property values to handle the overflowing text.