ScreenshotNeo
Sign in Get a free key

BlogGuides

CSS Overflow: How to Control Scrolling and Hidden Content

Learn when to use CSS overflow values, how the two axes interact, and how to fix unwanted scrolling or clipped content without blocking keyboard access.

By the ScreenshotNeo team4 October 20268 min read

CSS overflow controls what happens when content extends beyond a constrained box. Use auto when users should scroll only if needed, scroll when you want a scroll container even when content fits, hidden when content should be clipped but remain programmatically scrollable, and clip for visual cropping that must not scroll. The default, visible, lets content paint outside the box.

This guide covers the overflow shorthand and its axis-specific properties as defined by the CSS Overflow Module Level 3 and explained in MDN’s overflow reference and overflow guide.

1. How CSS overflow works

Overflow occurs when content does not fit in its box. A useful overflow behavior usually requires a size constraint: for example, a fixed or maximum height for a panel, or a width limit for a table wrapper. Without a constraint, the box may grow to fit its content instead of scrolling.

The overflow shorthand accepts one or two values. One value applies to both axes; with two, the first controls horizontal overflow and the second vertical overflow. The physical-axis longhands are overflow-x and overflow-y.

/* Same behavior on both axes */
.panel { overflow: auto; }

/* Horizontal first, vertical second */
.panel { overflow: auto hidden; }

/* Set axes separately */
.table-wrapper { overflow-x: auto; }
.panel { overflow-y: auto; }

These properties apply to block containers, flex containers, and grid containers. They control overflow at the box; they do not automatically set the box’s dimensions or make its contents responsive.

2. Choose the right overflow value

Value What it does Good fit
visible Does not clip overflowing content; it may paint outside the box. It does not create a scroll container. Content that may safely overlap nearby content.
auto Clips overflow and permits scrolling when needed. Scrollbar visibility depends on the platform and browser. Panels and wrappers that should scroll only when their content does not fit.
scroll Creates a scroll container and requests scrolling even if content currently fits. Visible scrollbar presentation varies by user agent and platform. Persistent scrolling behavior is intentional.
hidden Clips content and hides scrollbars, but remains programmatically scrollable; focus navigation may also scroll focused content into view. Clipped content that still needs to be reachable through focus or script.
clip Clips at the overflow clip edge and does not create a scroll container or permit programmatic scrolling. Decorative cropping when the clipped content does not need to be reached.

Values other than visible and clip establish a new block formatting context. Keep the distinctions between hidden and clip in mind: they are not interchangeable.

3. Make a div scroll

Give the element a size constraint and set an overflow value that allows scrolling. Use max-height when the element may shrink with its content, or a fixed height when its size should stay constant.

<div class="log-panel" role="region" aria-label="Build log" tabindex="0">
  <p>Build output goes here. Add enough content to overflow the panel.</p>
</div>
.log-panel {
  max-height: 24rem;
  overflow-y: auto;
  overflow-x: hidden;
}

A scrollable region may not be keyboard-focusable by default in every browser. Consider tabindex="0" so keyboard users can move focus to it and scroll it. Give the region an accessible name with aria-label or aria-labelledby; use a suitable role such as region when it helps people identify the area. Check that the region has a visible focus indicator.

4. Control each axis and understand the computed-value rule

Use axis-specific properties when only one direction should scroll. A common case is a wide table that needs horizontal scrolling but should remain unconstrained vertically:

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

Be careful with overflow-x: hidden; overflow-y: visible. When one axis is set to a value other than visible or clip, visible on the other axis computes to auto. So vertical overflow will not remain visibly spilling outside the box as the source declaration suggests.

/* The visible value computes to auto in this pairing */
.example {
  overflow-x: hidden;
  overflow-y: visible;
}

/* clip can pair with visible without that conversion */
.decorative-crop {
  overflow-x: clip;
  overflow-y: visible;
}

Choose the second pattern only when clipping is intended and the clipped content does not need scrolling. If content must remain reachable, make the relevant axis scrollable instead.

5. Prevent horizontal overflow without hiding useful content

A horizontal scrollbar often comes from a child wider than the viewport: a fixed-width element, an image without a responsive maximum width, a long unbroken token, or a layout whose columns cannot shrink. First find the element that exceeds its containing block; hiding the page’s horizontal overflow can conceal content and make it inaccessible.

/* Let images fit their containing block */
img, video {
  max-width: 100%;
}

/* Break long strings when that is appropriate for the content */
.prose {
  overflow-wrap: anywhere;
}

/* Allow a flex or grid child to shrink below its min-content size */
.flex-child, .grid-child {
  min-width: 0;
}

For code, tabular data, or other content that is more usable intact, provide a local horizontal scroller instead of breaking it:

.code-sample, .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

Use word-break only when breaking words is appropriate. The MDN overflow guide also discusses wrapping and responsive sizing as alternatives to adding horizontal scrolling.

6. Keep clipped and scrollable content accessible

Do not use clip or hidden on interactive content until you have checked keyboard navigation. With hidden, scripts can scroll the element and browsers may bring focused descendants into view. With clip, a focusable descendant can receive focus while remaining clipped, leaving keyboard users unable to see the focus target.

  • Use auto or scroll when people need to browse the overflow themselves.
  • Use hidden only when hidden scrollbars are intentional and the content remains reachable through focus or script.
  • Use clip for decorative or otherwise unnecessary overflow, not for content that users need to read or operate.
  • Test the region with a keyboard and a screen reader, including focus movement to descendants near the clipped edge.

Scrollbar appearance is platform-dependent. If layout shifts when a scrollbar appears, consider scrollbar-gutter: stable with overflow: auto to reserve space, rather than forcing a scrollbar just to keep dimensions stable.

7. Distinguish ink overflow from scrollable overflow

Not every painted pixel beyond a box should create a scroll area. Shadows, outlines, text decoration, border images, and overhanging glyphs are examples of ink overflow. They can extend visually outside an element without enlarging its scrollable overflow area. If a shadow is cut off, investigate clipping ancestors and painting behavior; changing the page’s scrolling rules may be the wrong fix. The CSS Overflow specification describes this distinction.

8. Troubleshoot overflow problems

Symptom Likely cause What to check or change
A div does not scroll It has no effective height or width constraint, or the content does not exceed that constraint. Inspect computed dimensions and content size. Add a suitable height, max-height, width, or max-width, then use auto on the intended axis.
overflow-y: visible still scrolls or clips The paired axis is neither visible nor clip, so visible computes to auto. Inspect computed styles. Decide whether the other axis should be clip, or make both axes’ behavior explicit.
The page has a horizontal scrollbar A child is wider than the viewport, often due to fixed sizing, an unbreakable token, or a flex/grid item’s minimum size. Find the overflowing child in browser developer tools. Use responsive sizing, min-width: 0, or suitable text wrapping; use a local scroller for content that must stay wide.
A scrollbar appears when content fits scroll requests a scroll container regardless of whether overflow currently exists. Use auto if scrolling should appear only as needed. If the goal is stable layout space, consider scrollbar-gutter: stable.
Content vanishes after adding hidden The value clips the content outside the box and hides its scrollbar. Use auto if users need to scroll; use visible if overlap is acceptable; use clip only for visual cropping with no scrolling requirement.
Keyboard focus disappears at a clipped edge A focused descendant is hidden by clipping, especially when clip prevents it from scrolling into view. Make the content reachable with a scrollable region and test keyboard focus. Do not use clip for interactive content that can move outside the visible area.
A shadow or outline is cut off An ancestor clips paint, even though the shadow or outline may be ink overflow rather than scrollable overflow. Inspect ancestor overflow values and adjust the clipping boundary or layout around the decoration.
  1. Inspect the element’s size constraint and compare it with its content dimensions.
  2. Identify the overflowing axis and set that axis deliberately.
  3. Check computed values on both axes, especially a visible value paired with a scrolling or clipping value.
  4. Decide whether the clipped content must remain reachable, then choose auto, scroll, hidden, or clip accordingly.
  5. For long words or tokens, try wrapping or responsive sizing before creating a horizontal scroll area.
  6. If scrollbar appearance shifts nearby layout, consider scrollbar-gutter: stable with auto.

9. Performance and reliability notes

Overflow values define clipping and scrolling behavior; they are not a general-purpose performance switch. A scrollable area can contain a large amount of content, so keep the region and the amount of rendered content appropriate to the interface. Avoid clipping content as a substitute for fixing an oversized child or a layout constraint. Verify the result at narrow viewport sizes and with keyboard navigation, since a rule that looks correct at one width can hide content at another.

10. Or skip the browser setup

If your task is to capture a rendered page while investigating a CSS issue, ScreenshotNeo is a website screenshot API and MCP server. The browser handles the page rendering; a single GET request returns a screenshot or PDF. See the ScreenshotNeo API documentation for its options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp
import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));
  • Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot.
  • Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers report the page verdict and billing status.
  • An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
  • 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots per month with no card.

11. Frequently asked questions

Does overflow: hidden disable scrolling?

It hides scrollbars and clips overflow, but the element can still be scrolled by script and may scroll when focus moves to hidden content.

Can I hide horizontal overflow while keeping vertical overflow visible?

Not with overflow-x: hidden; overflow-y: visible as written: the vertical value computes to auto. If vertical content must remain visible outside the box, consider whether horizontal clip is appropriate and safe for the content.

Should I use scroll or auto?

Use auto for scrolling only when content overflows. Use scroll when a scroll container is desired even when content fits; visible scrollbar behavior depends on the platform.

Do shadows cause scrollbars?

Shadows are ink overflow and do not necessarily extend the scrollable overflow area. A scrollbar or clipping issue may instead come from another descendant or an ancestor’s overflow rule.

What should I read for broader CSS coverage?

CSS: The Definitive Guide, Fifth Edition is a broad CSS reference covering implementation, accessibility, and newer specifications.

Keep reading

7 min read

LinkedIn Open to Work Image

Learn what LinkedIn’s Open to Work photo frame means, who can see it, how to add or remove it, and how to choose the right privacy setting.