The CSS overflow property controls how content behaves when it exceeds an element's box. 1. overflow: visible shows all content, even if it overflows. 2. overflow: hidden clips overflowing content and hides it. 3. overflow: scroll adds scrollbars to handle overflow, regardless of content size. 4. overflow: auto displays scrollbars only when necessary. Directional control can be achieved with overflow-x and overflow-y for horizontal and vertical scrolling, making overflow a powerful tool for managing layout behavior across different scenarios.

The CSS overflow property controls what happens when content overflows an element's box. It’s super useful when dealing with containers that might have more content than space allows — like long text in a fixed-size div or a dropdown menu.

Here’s a breakdown of the most common values and how they work in practice.

1. overflow: visible (default behavior)

This is the default setting. If your content is too big for the container, it just spills out and remains visible. No clipping, no scrollbars — just let it all show.

Use case: You don’t need to hide or constrain anything. Just display everything as it is.

.container {
  overflow: visible;
}

Note: This can cause layout issues if not handled carefully, especially on smaller screens.

2. overflow: hidden

When you set this, anything that doesn’t fit inside the container gets clipped — users won’t see it at all. No scrollbars appear either.

Use case: Great for hiding extra content intentionally, like tooltips or image cropping effects.

.crop-image {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

You’ll often use this to create clean layouts where overflow isn’t needed or should be controlled by other means.

3. overflow: scroll

This forces scrollbars to appear always, even if the content fits perfectly. The browser adds horizontal and vertical scrollbars regardless.

Use case: Useful when you want consistent scrolling behavior — for example, in a chat window or comment section where content is dynamic.

.chat-box {
  height: 300px;
  overflow: scroll;
}

Some browsers (like macOS Safari) only show scrollbars when needed, even with scroll, so appearance can vary slightly.

4. overflow: auto

Similar to scroll, but the browser decides when to show scrollbars — only when content actually overflows.

Use case: Probably the most commonly used value. It keeps things clean and only shows scrollbars when necessary.

.comment-section {
  max-height: 200px;
  overflow: auto;
}

• Good for dynamic content.
• Keeps layout tidy without unnecessary scrollbars.

Bonus: Directional control with overflow-x and overflow-y

You can also control overflow separately for horizontal and vertical directions.

For example:

.table-container {
  overflow-x: auto;   /* Only allow horizontal scrolling */
  overflow-y: hidden; /* Never show vertical scrollbar */
}

Useful for wide tables or horizontally scrollable cards.

That’s basically it. Overflow gives you fine control over how content behaves within a box. Pick the right one based on whether you want to hide, scroll, or let it flow.

The above is the detailed content of What is the CSS `overflow` property and its values?. For more information, please follow other related articles on the PHP Chinese website!