overflow: hidden clips painted content but creates a scroll container when content overflows; script or keyboard focus can move that hidden scroll position. overflow: clip clips without creating a scroll container and cannot be scrolled programmatically. Both can conceal content, so neither repairs a box that is too small for essential text or controls.
Make this comfortable
CSS overflow: clip vs hidden: avoid an accidental scroll container
When to use it
A status tile draws a decorative light streak that may extend beyond its rounded edge. The streak contains no text, links, or controls. Clipping that decoration with overflow: clip prevents it from becoming an unwanted scroll ancestor for nearby sticky or scroll-driven behavior. A transcript pane is a different case: its content must be reachable, so use overflow: auto and a bounded size rather than clip. Test keyboard traversal through every descendant, high zoom, long translations, and a focus outline near the edge. If a focusable link lies outside a clipped box, it can receive focus while remaining invisible. That is a layout defect to fix in the markup or sizing, not a reason to switch blindly to hidden. Mixing clip on one axis with a scrolling value on the other can compute differently than expected; inspect the two-axis rule in the browser. Do not put clip on the document root to conceal horizontal overflow from an oversized child.
.status-tile { overflow: clip; border-radius: .55rem; }
.status-tile__content { position: relative; z-index: 1; }
.transcript-pane { max-block-size: 21rem; overflow: auto; }Cost and verification
The property itself is cheap. The meaningful cost is the risk of inaccessible content or altered scroll ancestry. An accidental hidden scroll container can affect sticky positioning and which ancestor a scroll timeline observes; clip avoids that only when the overflow is genuinely decorative. The transcript pane uses auto to preserve access and may need a visible label and keyboard testing. Check whether focus rings are cut off by the status tile and add space or move the outline if they are. Do not infer correctness from the absence of a scrollbar. A no-CSS view and a 200% zoom view often reveal content that the fixed box was concealing.
Common Mistakes
- Do not clip interactive descendants that can receive keyboard focus.
- Do not assume hidden and clip create the same scroll behavior.
- Do not hide page overflow to cover a sizing bug.
Connected lessons
css
reference
web