CSS Overflow: Control Content Beyond Its Box

The overflow property controls what happens when an element’s content is larger than the space available inside its box. Choose a value that keeps the content useful and reachable.

Start with the default: visible

The initial value is visible. Content can extend beyond the element’s box, which is often fine for short text but may overlap nearby content when a fixed size is used.

.notice {
  width: 14rem;
  height: 5rem;
  overflow: visible;
}

Compare hidden, auto and scroll

• hidden clips overflowing content and hides scrollbars. The element can still be scrolled programmatically.
• auto allows scrolling and shows scrollbars when the content needs them.
• scroll allows scrolling and reserves scrollbars even when the content currently fits.
• clip clips content without creating a scroll container.

For a list with a maximum height, auto keeps the page compact while letting readers reach every item:

.results {
  max-height: 16rem;
  overflow: auto;
}

If a scrollable region must be navigated with a keyboard, make it focusable and give it a clear accessible name where appropriate:

<div class="results" tabindex="0" aria-label="Search results">
  ...long list of results...
</div>

Control each direction

Use overflow-x and overflow-y to set horizontal and vertical behavior separately. For example, a wide data table can scroll horizontally without creating a tall, nested scrolling area:

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

Truncate a single line of text

For a short label that must fit on one line, combine overflow: hidden, white-space: nowrap and text-overflow: ellipsis:

.file-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Use truncation only when people can still discover the full text, such as by opening the item or viewing its details. Do not hide essential instructions or form errors just to make a layout fit.

Check overflow in flex and grid layouts

A long word or code sample can make a flex or grid child wider than its track. Set min-width: 0 on the child when it should be allowed to shrink, and let the content wrap or scroll intentionally.

.card-content {
  min-width: 0;
  overflow-wrap: anywhere;
}