CSS Overflow

The CSS overflow property controls what happens when an element’s content is too large to fit inside its box. It determines whether extra content is clipped, scrollable, or visible outside the container.

What Overflow Controls

When content exceeds the width or height of a box:

CSS Overflow Properties (HTML Table)

Main Overflow Properties

Property	Description
`overflow`	Controls overflow in both directions (x & y)
`overflow-x`	Controls horizontal overflow
`overflow-y`	Controls vertical overflow

Overflow Values (HTML Table)

Value	Description
`visible`	Content overflows and is fully visible (default)
`hidden`	Content is clipped; overflow is not visible
`scroll`	Content is clipped but scrollbars always appear
`auto`	Scrollbars appear only when needed
`clip`	Similar to hidden but cannot be scrolled

Example

Copy Text

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

Control Both Directions Separately

Copy Text

.box {
  overflow-x: scroll;
  overflow-y: hidden;
}

When to Use What

Use Case	Recommended Value
Hide overflowing content	`overflow: hidden`
Show scrollbars only when needed	`overflow: auto`
Force scrollbars always visible	`overflow: scroll`
Allow content to spill out	`overflow: visible`
Clip content with no scrolling	`overflow: clip`

CSS Tutorial