CSS Overflow Summary

CSS overflow controls what happens when content is larger than the box that contains it. The extra content can remain visible, be hidden, or become scrollable.

.box {
	height: 120px;
	overflow: auto;
}

When Content Does Not Fit

Content can overflow when an element has a limited width or height. Long text, large images, fixed-size boxes, and unbroken words can all extend beyond their container.

.box {
	height: 100px;
}

If the content needs more than 100 pixels of height, the browser must decide what to do with the extra content.

Overflow Visible

The default value is visible. Extra content remains visible even when it extends outside the element’s box.

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

The content is not removed, but it may overlap nearby elements and make the layout difficult to understand.

Overflow Hidden

The value hidden clips anything that extends beyond the box.

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

This can create a clean edge, but it can also hide text, controls, or other important content. Use it only when clipping the extra content is intentional.

Overflow Auto

The value auto adds scrolling when the content does not fit.

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

If the content fits, no scrollbar is needed. If the content is too large, the user can scroll inside the element.

Overflow Scroll

The value scroll creates a scrollable area even when the content may already fit.

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

Because it can show unnecessary scrollbars, auto is usually the more practical choice.

Horizontal And Vertical Overflow

The overflow-x and overflow-y properties control the horizontal and vertical directions separately.

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

This hides extra horizontal content while allowing vertical scrolling.

Horizontal Overflow

Horizontal overflow often means that something is wider than the available page space.

An element has a fixed width that is too large.
An image is wider than its container.
A long word or URL cannot wrap.
Padding or borders make a box wider than expected.

Hiding horizontal overflow may conceal the symptom without fixing the cause. Check which element is actually extending beyond the page.

Overflow Needs A Limited Size

Overflow is easiest to see when the element has a limited height or width.

.box {
	max-height: 160px;
	overflow-y: auto;
}

Without a height, max-height, width, or max-width limit, the box may simply grow to contain the content.

The CSS size lesson explains width, height, and related sizing properties.

Images Can Cause Overflow

An image can overflow when its natural width is larger than its container.

img {
	max-width: 100%;
	height: auto;
}

This lets the image shrink to fit the available width while keeping its proportions.

Choose Overflow Carefully

Use visible when content can safely extend beyond the box. Use hidden when clipping is intentional. Use auto when the user should still be able to reach all of the content.

When overflow appears unexpectedly, first look for the element that is too large. The best fix is often correcting the size or layout rather than hiding the extra content.

Overflow