CSS Documentation

Overflow

Menu

CSS Overflow

The overflow property specifies what should happen if content overflows an element's box. This property is especially useful for controlling the behavior of content that is too large for its container.

Overflow Values

  • visible: The default. Content is not clipped and may be rendered outside the padding box.
  • hidden: Content is clipped and no scrollbars are provided.
  • scroll: Content is clipped and scrollbars are added to see the rest of the content.
  • auto: Similar to scroll, but scrollbars are added only when necessary.

Example

Here's an example of using different overflow values:

.overflow-visible {
ㅤoverflow: visible;
}

.overflow-hidden {
ㅤoverflow: hidden;
}

.overflow-scroll {
ㅤoverflow: scroll;
}

.overflow-auto {
ㅤoverflow: auto;
}

Overflow-x and Overflow-y

You can also control the overflow separately for horizontal and vertical directions:

.element {
ㅤoverflow-x: hidden;
ㅤoverflow-y: scroll;
}

Best Practices

  • Use overflow: hidden to crop content that exceeds the element's dimensions
  • Use overflow: scroll when you always want scrollbars
  • Use overflow: auto for a more user-friendly approach, adding scrollbars only when needed
  • Be cautious with overflow: visible as it might affect layout and readability
  • Consider using overflow-x and overflow-y for more precise control

Understanding and properly using the overflow property is crucial for managing content within containers and creating responsive designs.