overflow: hidden clips content that extends beyond an element’s padding box. It does not remove that content from the document; it only prevents the overflowing portion from being painted outside the element.

Developers often shorten the name to overflow hidden. The valid CSS declaration is overflow: hidden, and it takes effect when the element has content that exceeds a constrained width or height. If the box can grow naturally to fit its contents, there may be nothing to clip.

What does overflow: hidden do?

The overflow property controls content that does not fit inside a box. With overflow: hidden, the browser clips the excess at the padding edge. The border remains visible, while text, child elements, backgrounds, shadows, or other painted content extending beyond that edge may be cut off.

The declaration applies to both horizontal and vertical overflow. Use overflow-x or overflow-y when only one axis should be clipped. A hidden overflow area does not display user-facing scrollbars, but the content can still exist in layout and can usually be reached by script by changing properties such as scrollTop or scrollLeft.

How does a fixed-size box show clipping?

A fixed-size box makes the effect clear because its content cannot expand the box. This example gives the element a 220-pixel outer width and an 80-pixel outer height:

CSS: .card { width: 220px; height: 80px; padding: 16px; box-sizing: border-box; overflow: hidden; }

Markup: <div class=”card”>This content is deliberately long enough to exceed the available height of the card and continue below its padding edge.</div>

Only the portion that fits inside the card is visible. The remaining text still belongs to the element, so it can affect layout calculations and remain available to browser APIs. Reducing the height or adding more content makes the clipping easier to observe.

Without a constrained height, a normal block usually expands vertically and displays all of its content. This is why overflow hidden should not be used as a universal fix for an unrelated sizing or layout defect. First establish which dimension is meant to remain constrained.

When should you choose visible, auto, scroll, or clip?

• visible: The default value. Content can paint outside the element’s box, which is useful for badges, menus, or shadows that must extend beyond their parent. It does not provide scrolling or clipping.
• hidden: Clips excess content and shows no scrollbars. It suits decorative cropping, controlled panels, and boxes where inaccessible overflow is intentional. Hidden overflow can still be scrolled programmatically.
• auto: Clips overflow and provides scrolling when the content requires it. This is usually the practical choice for a panel, log, or text region whose content must remain reachable without forcing a scrollbar when the box is short.
• scroll: Provides a scrolling mechanism even when the content currently fits. Choose it when a stable scrollbar area matters for layout or when users should immediately recognize that more content may be available.
• clip: Clips content like hidden but does not allow scrolling, including programmatic scrolling. It also does not establish a block formatting context. Use it for deliberate, permanent clipping when the overflow must not be scrollable.

How does CSS overflow: hidden affect layout and focus?

On a block container, overflow: hidden establishes a block formatting context. This changes how the element interacts with floats and margin collapsing and can contain floated descendants within the box. The same formatting-context behavior is also associated with values such as auto and scroll, but not clip. If clipping and a formatting context are both needed with clip, use an explicit layout value such as display: flow-root.

Clipping does not equal removal. A clipped descendant remains in the DOM and may still be focusable. A keyboard user could tab to a link or form control positioned outside the visible area, while its focus outline is clipped or difficult to see. Do not assume that hidden overflow removes an item from the tab order or makes it inaccessible to scripts.

For interactive content that must remain reachable, use auto or a layout that keeps the control visible. Reserve hidden for content that is intentionally cropped, and test focus movement, keyboard navigation, and responsive dimensions whenever descendants can extend beyond the padding box.