What is the overflow property in CSS?

The CSS `overflow` property controls how content that overflows an element's box is handled. It dictates what happens when the content is too large to fit within the designated area of an element.

What is the `overflow` property?

The overflow property is used to specify whether to clip content, render scrollbars, or simply display content that overflows an element's block-level container. It applies when the content's dimensions exceed the dimensions of its container, either horizontally or vertically.

Common Values for `overflow`

The overflow property accepts several key values, each with a distinct behavior:

• visible (default): The overflow content is not clipped and may render outside the element's padding box. This is the default behavior.
• hidden: The overflow content is clipped and will not be visible. No scrollbars are provided.
• scroll: The overflow content is clipped, and scrollbars are added to the element, allowing the user to scroll through the content. Scrollbars are always shown, even if not needed.
• auto: The browser determines if scrollbars are needed. If content overflows, scrollbars are added; otherwise, they are not. This is often the most practical choice.
• clip: Similar to hidden, but prevents all scrolling, including programmatic scrolling. It's a newer value that explicitly disables all forms of scrolling for the box.

`overflow-x` and `overflow-y`

The overflow property is a shorthand for overflow-x and overflow-y:

• overflow-x: Controls the overflow behavior for content flowing horizontally (left/right).
• overflow-y: Controls the overflow behavior for content flowing vertically (top/bottom).

You can use these individual properties to apply different overflow behaviors to each axis. For example, overflow-x: hidden; overflow-y: scroll; would hide horizontal overflow but allow vertical scrolling.

Example Usage

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: auto;
  padding: 10px;
}

<div class="container">
  <p>This is a long paragraph that will likely overflow the container's fixed dimensions. When the 'overflow' property is set to 'auto', scrollbars will appear if the content exceeds the container's height or width, allowing the user to see all the content without it breaking the layout.</p>
  <p>More content to ensure overflowing occurs.</p>
  <p>Even more content to ensure overflowing occurs.</p>
</div>

In this example, the .container has a fixed width and height. Because overflow: auto; is applied, if the paragraphs inside exceed the 100px height, a vertical scrollbar will automatically appear, allowing the user to scroll down and view the rest of the text without changing the container's size.