? overflow in CSS

The overflow property controls what happens to content that exceeds the size of its container (i.e., content that "overflows").

Syntax

selector {  overflow: visible | hidden | scroll | auto | clip;}

Values

Examples

1. Overflow visible (default)

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

Overflowing content will be fully shown outside the box.

2. Hide overflow

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

Content outside the box boundary is clipped and not visible.

3. Add scrollbars only if needed

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

Scrollbars appear only if content is larger than the box.

4. Always show scrollbars

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

Scrollbars always visible, even if content fits inside.

Overflow on Specific Axis

• overflow-x — horizontal overflow

• overflow-y — vertical overflow

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

Use Cases

• Contain floated elements (with overflow: hidden on parent).

• Create scrollable content areas.

• Prevent content spilling in fixed-size containers.

Want a demo or help with scrollable sections or hidden overflow tricks?