Overflow

CSS Overflow

CSS overflow controls what happens when content is too large to fit inside an element's available space. Content can remain visible, be clipped, or become accessible through scrolling.

What is Overflow?

Overflow occurs when content requires more space than an element's box provides. This can happen when an element has a limited width or height, when text cannot wrap normally, or when its contents are larger than the available area.

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

If the content needs more than 100 pixels of height, it extends beyond the available content area unless the overflow behavior changes how it is displayed.

The overflow Property

The CSS overflow property controls how content that extends beyond an element's box is handled.

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

Common values include visible, hidden, clip, scroll, and auto.

The visible Value

visible is the initial value of overflow. Overflowing content is not clipped and may be displayed outside the element's box.

div {
  overflow: visible;
}

The element's specified dimensions do not automatically expand to contain the overflowing content. Instead, the extra content can remain visible beyond the box.

The hidden Value

The hidden value clips content that extends beyond the element's padding box so that the overflow is not normally visible.

div {
  overflow: hidden;
}

No scrollbars are provided for the user to reveal the clipped content, although the element remains a scroll container and its content can be scrolled programmatically or by certain browser actions.

The clip Value

The clip value clips overflowing content and does not provide scrolling to reach the clipped area.

div {
  overflow: clip;
}

Unlike hidden, clip does not create a scroll container. It is useful when overflowing content should simply be clipped rather than made scrollable.

The scroll Value

The scroll value clips overflowing content but provides a scrolling mechanism so the user can access content that does not fit.

div {
  overflow: scroll;
}

Scrollbars or another scrolling mechanism may be displayed even when the content fits within the element, depending on the browser and operating system.

The auto Value

The auto value lets the browser provide scrolling when it is needed.

div {
  overflow: auto;
}

If the content fits within the element, a scrolling mechanism is generally unnecessary. If the content overflows, the browser can make the extra content accessible by scrolling.

Horizontal and Vertical Overflow

The overflow-x and overflow-y properties allow horizontal and vertical overflow to be controlled separately.

div {
  overflow-x: auto;
  overflow-y: hidden;
}

overflow-x controls overflow along the horizontal axis, while overflow-y controls overflow along the vertical axis.

When Overflow Occurs

Overflow commonly appears when an element has a fixed or maximum size that is smaller than the space required by its content.

.box {
  width: 300px;
  max-height: 120px;
  overflow: auto;
}

In this example, the box can grow until it reaches 120 pixels in height. If its content requires additional vertical space, the overflow can then be accessed by scrolling.

Allowing content to determine an element's height is often preferable when a fixed height is not necessary.

Try Overflow

Edit the overflow value in the example and compare visible, hidden, clip, scroll, and auto. You can also change the height of the box to see when overflow begins.

Choosing an Overflow Value

The appropriate overflow value depends on what should happen to content that does not fit. Use visible when content may extend beyond the box, hidden or clip when extra content should not be displayed, and auto or scroll when users need access to overflowing content.

Be careful when hiding or clipping overflow. Important text, controls, or other content can become inaccessible if users have no way to reach it.

Summary

The CSS overflow property controls what happens when content extends beyond an element's available space. The visible, hidden, clip, scroll, and auto values provide different ways to display, clip, or make overflowing content accessible. The overflow-x and overflow-y properties provide separate control over horizontal and vertical overflow.

This completes the CSS Box Model section. You have covered the content area, width and height, padding, borders, margins, margin collapsing, box sizing, minimum and maximum sizes, and overflow.