Overflow in CSS

Overflow in CSS controls what happens when content is larger than the box that contains it. A box may have more text than its height allows, an image may be wider than its parent, a long URL may break the layout, or a dropdown may need its own scroll area. The overflow property decides whether that extra content is visible, clipped, scrollable, or handled automatically by the browser.

Understanding overflow is important because many layout bugs are really overflow bugs. Horizontal scrolling on mobile, clipped menus, broken code blocks, hidden form messages, and cards with text spilling outside often come from missing or incorrect overflow rules. Overflow is not only a visual property. It also affects scroll containers, sticky positioning, focus visibility, and user experience.

What Overflow Means in CSS

Every element creates a box. If the content fits inside that box, there is no overflow problem. If the content is larger than the available area, the content overflows. CSS then needs a rule for how to display that extra content.

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

This box has fixed dimensions. If the content inside is larger than 250px by 120px, the browser can add scrollbars as needed because overflow: auto is used.

Overflow Values

Value	Behavior
visible	Overflow content is visible outside the box
hidden	Overflow content is clipped and not scrollable
scroll	Scrollbars are shown so overflow can be scrolled
auto	Scrollbars appear only when needed
clip	Overflow is clipped without creating a scroll container

The default value is usually visible. That is why content can spill outside a box if no overflow rule is set. This default is useful because CSS does not hide content unexpectedly, but it can create messy layouts when dimensions are constrained.

overflow: visible

The value visible allows content to paint outside the element box. The box itself does not grow, but the content remains visible. This is the default behavior for many elements.

.label {
  width: 100px;
  overflow: visible;
}

Visible overflow can be useful for decorative effects, tooltips, shadows, and badges. But it can also make content overlap nearby elements. Use it when overflow is intentional, not when the layout is accidentally too small.

overflow: hidden

The value hidden clips overflow content. Anything outside the box is not visible. It also usually creates a new formatting context, which can affect layout behavior.

.thumbnail {
  width: 300px;
  height: 180px;
  overflow: hidden;
}

This is common for image crops, cards, sliders, and rounded containers. If an image inside the thumbnail is larger than the box, the extra part is hidden. Be careful with important text or focusable elements. Hiding overflow can make content unreachable or invisible.

overflow: scroll and overflow: auto

The value scroll always creates scrollbars, even if the content fits. The value auto creates scrollbars only when needed. In most practical layouts, auto is preferred because it avoids unnecessary scrollbars.

.code-panel {
  max-height: 400px;
  overflow: auto;
}

This creates a scrollable area only when the code panel is taller than 400px. It keeps the page layout controlled while still allowing the user to access the full content.

overflow-x and overflow-y

CSS can control horizontal and vertical overflow separately using overflow-x and overflow-y. This is useful when only one direction should scroll.

.table-wrapper {
  overflow-x: auto;
}

.sidebar-list {
  max-height: 60vh;
  overflow-y: auto;
}

The table wrapper allows wide tables to scroll horizontally on small screens. The sidebar list allows vertical scrolling without making the whole page extremely long.

Horizontal Overflow on Mobile

Horizontal overflow is one of the most common responsive design problems. It happens when something is wider than the viewport. Common causes include fixed-width containers, large images, long code lines, wide tables, unnecessary min-width, or elements positioned outside the page.

• Use max-width: 100% for images and media.
• Wrap wide tables in an overflow-x container.
• Avoid fixed desktop widths on mobile.
• Check long words, URLs, and code blocks.
• Inspect the page width in browser developer tools.
• Use box-sizing: border-box to control padding and border sizing.

Text Overflow and Ellipsis

The text-overflow property controls how clipped inline text is shown. The common pattern uses an ellipsis for single-line text.

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

All three declarations are needed. white-space: nowrap keeps text on one line. overflow: hidden clips the extra text. text-overflow: ellipsis displays the three-dot indicator.

Overflow and Border Radius

Overflow is often paired with border radius. If a child image or background extends beyond rounded corners, overflow: hidden can clip it to the parent shape.

.avatar-frame {
  border-radius: 50%;
  overflow: hidden;
}

This is useful for circular avatars, rounded cards, media thumbnails, and clipped decorative effects. But do not apply hidden overflow blindly because it can also hide dropdowns, focus rings, and shadows.

Overflow and Focus Visibility

Accessibility can be affected by overflow. If a focus outline extends outside a container with overflow: hidden, the outline may be clipped. Keyboard users may not see which element is focused.

For interactive components, test keyboard navigation. If focus rings are clipped, consider using outline-offset, internal focus styles, or a different container structure. Visual clipping should not make navigation unclear.

Scroll Containers

When overflow creates scrolling, the element becomes a scroll container. This matters for sticky positioning and scroll behavior. A sticky element sticks relative to its nearest scrolling ancestor, not always the whole page.

.panel {
  max-height: 500px;
  overflow-y: auto;
}

.panel-heading {
  position: sticky;
  top: 0;
}

In this example, the heading can stick inside the scrolling panel. This is useful for long sidebars, tables, settings panels, and documentation navigation.

Overflow Clip

The value clip clips overflow without creating a scroll container. It is stricter than hidden in some behavior. It can be useful when you want visual clipping but do not want scroll container side effects.

.decorative-shape {
  overflow: clip;
}

Browser support for modern overflow values should be checked if supporting older browsers matters. For most beginner projects, hidden, auto, and direction-specific overflow are the main values to master first.

Debugging Overflow

When a page has unexpected horizontal scrolling, inspect the widest element. Developer tools can help reveal which element extends past the viewport. Temporarily adding outlines to elements can also make the problem visible.

* {
  outline: 1px solid red;
}

This debugging trick should not stay in production CSS, but it can quickly show which box is wider than expected. Once the source is found, fix the actual sizing problem instead of hiding the body overflow as a shortcut.

Overflow on the body Element

Developers sometimes add overflow-x: hidden to the body to remove horizontal scrolling. This can hide the symptom, but it does not fix the element that is actually too wide. It may also hide content that users should be able to reach.

body {
  overflow-x: hidden;
}

Use this only when the design intentionally has decorative elements that extend outside the viewport. If the page scrolls horizontally because a table, image, code block, or fixed-width section is too wide, fix that element instead.

Overflow and Modals

Modals often need overflow handling. When a modal is open, the page behind it may need to stop scrolling, while the modal content itself may need its own scroll area if the content is tall.

body.modal-open {
  overflow: hidden;
}

.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

This keeps the background page from scrolling while allowing long modal content to remain accessible. Without a modal scroll area, content may extend beyond the viewport and become difficult to reach.

Overflow and Code Blocks

Programming and technical posts often contain long code lines. Breaking those lines can make code harder to read, but allowing them to overflow can break the article layout. A common solution is horizontal scrolling inside the code block.

pre {
  overflow-x: auto;
  max-width: 100%;
}

This keeps the page width stable while allowing readers to scroll the code when needed. It is better than letting long code create horizontal page scrolling.

Overscroll Behavior

The overscroll-behavior property controls what happens when a user scrolls past the edge of a scroll container. It is useful when nested scroll areas should not pass scroll movement to the page behind them.

.drawer {
  overflow-y: auto;
  overscroll-behavior: contain;
}

This can improve side drawers, modals, mobile menus, and panels where scroll chaining feels annoying. It does not replace overflow, but it works with overflow-created scroll containers to make scrolling behavior more controlled.

Overflow and Print Layout

Overflow rules can also affect printed pages. Content clipped with overflow: hidden may be missing when printed. Scrollable panels may not print all their internal content. If a page needs to print well, avoid hiding important article text inside fixed-height scroll containers.

For normal blog posts, code blocks and tables can use overflow for screen layout, but the main article body should usually remain in normal flow so it can expand naturally.

Overflow should protect layout without hiding important content.

That balance matters.

Always test.

Common Overflow Mistakes

• Using overflow: hidden to hide a layout problem instead of fixing the cause.
• Clipping focus outlines and dropdowns accidentally.
• Forgetting horizontal scroll wrappers for wide tables.
• Using fixed widths that create mobile overflow.
• Expecting text-overflow ellipsis to work without nowrap and hidden overflow.
• Creating nested scroll areas that make pages hard to use.

Overflow in CSS FAQ

What does overflow do in CSS?

The overflow property controls what happens when content is larger than the element box.

What is the difference between overflow hidden and auto?

hidden clips extra content, while auto adds scrollbars only when content overflows.

How do I stop wide tables from breaking mobile layout?

Wrap the table in a container with overflow-x: auto so the table can scroll horizontally.

Why is text-overflow ellipsis not working?

The element usually needs white-space: nowrap, overflow: hidden, and text-overflow: ellipsis together.

---