Overflow

You will be able to control how a CSS box behaves when its content is larger than the box by choosing the right overflow value.

What it is

Overflow describes what happens when content inside an element extends beyond the element's padding box. By default, CSS uses overflow: visible, so content can spill outside the box. The overflow property lets you clip that content, show scrollbars, or let the browser decide. It is most useful on block-level containers, such as div, section, article, or a flex/grid item, where you can set a height or width. Related terms include overflow-x, overflow-y, clipping, scrollbars, and block formatting context.

Why it matters

• It keeps layouts predictable when text, images, tables, or code blocks are too wide or too tall.
• It creates scrollable panels, sidebars, tables, and code blocks without breaking the surrounding page layout.
• It prevents long words or fixed-width content from pushing other elements out of place.
• It helps you balance visual containment with accessibility: hidden content may be unreachable, while scrollable content can remain usable.

Syntax or steps

The smallest useful pattern is to give the box a size constraint, then choose an overflow value.

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

Use overflow-x and overflow-y when you need different behavior horizontally and vertically.

Example

<div class="panel">
  <p>First paragraph...</p>
  <p>Second paragraph...</p>
</div>

.panel {
  height: 200px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #ccc;
}

The HTML creates a box with the class panel. The CSS limits its height to 200px. Because overflow: auto is set, the browser adds a scrollbar only if the paragraphs are taller than the box. If the content fits, no scrollbar appears. The padding and border keep the panel visually contained, while the overflowing text remains reachable through scrolling.

Common mistakes

• Applying overflow to an element with no height, max-height, or width constraint. The box grows, so overflow never triggers. Fix it by setting a size limit.
• Using overflow: hidden for important content. The content is clipped and may be unreachable. Fix it by using overflow: auto, overflow: scroll, or allowing the box to grow.
• Mixing overflow-x and overflow-y without thinking. One axis may create a scrollbar while the other clips content. Fix it by setting both axes explicitly when needed.
• Assuming overflow: scroll always looks good. It can show empty scrollbars even when not needed. Fix it by using overflow: auto for most panels.

When to use it

Use overflow when a box must stay fixed while its content may exceed it. The closest alternative is letting the box grow with max-height or max-width. Use a size limit with overflow: auto for scrollable panels; use max-height without forcing scrollbars when you want the box to expand up to a limit.

Practice

Guided exercise: create a .notes box with height: 150px and overflow: auto, then put several paragraphs inside it.

1. Add the CSS rule for .notes.
2. Insert enough text to exceed 150px.
3. Observe that a vertical scrollbar appears only when needed.

Challenge: make a horizontal-only scrollable table with overflow-x: auto, overflow-y: hidden, and white-space: nowrap. Expected output: a horizontal scrollbar appears, but no vertical scrollbar appears.

Quick check

Question: Which value shows a scrollbar only when content exceeds the box?

Answer: overflow: auto.

Summary

Overflow controls the relationship between content size and box size. Use a constrained height or width, then choose visible, hidden, auto, scroll, or clip based on whether content should spill, be clipped, or be scrollable. For most user-facing panels, overflow: auto is the safest starting point.