overflow

overflow controls content that extends outside a box. It sets overflow-x and overflow-y; it does not automatically enlarge a constrained box to fit the content.

Make excess content reachable

The region’s maximum height creates vertical overflow. Auto provides scrolling when needed. Tab to the named region and use the arrow keys to reach later lines.

<h2 id="notes-title">Notes</h2>
<div class="notes" tabindex="0" role="region" aria-labelledby="notes-title">
  <p>Read the source.</p>
  <p>Change one value.</p>
  <p>Compare the result.</p>
  <p>Try a smaller width.</p>
  <p>Keep every line reachable.</p>
</div>

.notes {
  max-height: 100px;
  overflow: auto;
  padding: 0.5rem;
  border: 1px solid #94a3b8;
}
p {
  margin-block: 0.5rem;
}

Scroll a wide table within its own region

The table has a deliberate minimum width. Only its wrapper scrolls horizontally, leaving the rest of the document at the available width.

<div
  class="table-scroll"
  tabindex="0"
  role="region"
  aria-label="Workshop schedule"
>
  <table>
    <caption>
      Workshop schedule
    </caption>
    <thead>
      <tr>
        <th scope="col">Session</th>
        <th scope="col">Time</th>
        <th scope="col">Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">HTML foundations</th>
        <td>10:00</td>
        <td>Room one</td>
      </tr>
      <tr>
        <th scope="row">CSS layout</th>
        <td>11:00</td>
        <td>Room two</td>
      </tr>
    </tbody>
  </table>
</div>

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
table {
  min-width: 30rem;
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  padding: 0.75rem;
  border: 1px solid #94a3b8;
}

Values and axis behavior

Both longhands initially use visible and are not inherited. One value sets both axes; two set horizontal then vertical. Visible allows painting outside. Auto scrolls when content overflows; scroll requests a scroll interface even without overflow. Operating-system overlay scrollbars can remain visually hidden until interaction.

Hidden clips but permits programmatic scrolling and focus-induced scrolling. Clip forbids scrolling and does not establish a scroll container. Unlike hidden, clip alone does not create a new block formatting context; combine it with display:flow-root when that context is also needed.

When one axis is neither visible nor clip, visible on the other computes to auto and clip computes to hidden. The axes are not entirely independent. Overlay is a legacy alias for auto.

Common mistakes

Scrolling needs a size constraint or content wider than its box; adding overflow:auto to an unconstrained, growing block may show no change. Avoid clipping essential controls or text, particularly at zoomed sizes. Learn max-height, min-width, and scrollbar-gutter.

Sources and browser support

MDN: overflow describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.