CSS Overflow

What is overflow ?

The overflow property controls how a box (like a div) handles extra content that goes beyond its set width or height. overflow: value;

Common Values of overflow

1. visible (default)

• Content spills outside the box — not clipped.

div {
  overflow: visible;
}

Good for text but may break layout.

2. hidden

• Extra content is cut off (clipped) and not visible.

div {
  overflow: hidden;
}

Use when you want to hide overflow (e.g., for image containers).

3. scroll

• Always shows scrollbars, even if content fits.

div {
  overflow: scroll;
}

Avoid unless you always want scrollbars.

4. auto

• Adds scrollbars only when needed.

div {
  overflow: auto;
}

Best for dynamic content that might grow.

Shorthand for Directional Overflow

You can control horizontal and vertical overflow separately:

overflow-x: auto; /* left-right scrolling */

overflow-y: hidden; /* top-bottom hidden */