Definition
The overflow CSS property is used to control how content that exceeds the size of its container is displayed. It determines whether the content is clipped, displayed with scrollbars, or automatically expanded to fit the container.
The overflow property accepts four values:
-
visible: This is the default value. It allows content to overflow the container without any clipping or scrollbars, potentially extending beyond the container’s boundaries. -
hidden: Content that exceeds the container’s dimensions is clipped and not visible. It is effectively hidden from view. -
scroll: Scrollbars are added to the container, allowing users to scroll and view the overflowing content. -
auto: This value is similar toscroll, but scrollbars are only displayed when the content exceeds the container’s dimensions. If the content fits within the container, no scrollbars are shown.
Here’s an example:
.container {
overflow: scroll;
}
In this example, the .container class sets the overflow property to scroll, which adds scrollbars to the container when the content exceeds its dimensions.
You can choose the appropriate overflow value based on your design requirements. By using hidden, you can hide overflowing content and maintain a clean layout. With scroll or auto, you can allow users to scroll and view the entire content even when it exceeds the container’s boundaries.
The overflow property is helpful when dealing with content that extends beyond the available space, providing control over how the overflow is handled and ensuring a consistent user experience.