CSS Tutorial

CSS Overflow

The overflow property controls what happens when content inside an element is too large to fit in the given box.

Possible Values:

• visible – Default. Content overflows and is visible outside the box.
• hidden – Extra content is hidden.
• scroll – Always shows scrollbars (horizontal/vertical) even if not needed.
• auto – Scrollbars are shown only when needed.

Interactive Example:

overflow: auto will show scrollbars only when necessary:

CSS Code:

div {
  width: 300px;
  height: 100px;
  overflow: auto;
}

Note:

• Use overflow-x and overflow-y for horizontal and vertical control separately.
• Scrollbars may look different on different browsers.
• overflow: hidden is useful for clipping content or controlling layout breaks.