Codectionary / Developer documentation / CSS

overflow: clip versus hidden

Both clip and hidden can hide content outside a box, but they differ in scrolling behaviour.

What it is and why to use it

Both clip and hidden can hide content outside a box, but they differ in scrolling behaviour. hidden creates a scroll container that can still be scrolled programmatically; clip forbids scrolling and does not establish a scroll container. This matters for both sticky positioning and hidden focusable content.

Common mistakes and limitations

Clipping can make content or focus indicators unreachable. clip alone does not establish the same formatting context as hidden; use flow-root explicitly if that is needed. Check support for older browsers rather than relying on clipping for essential information.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="box"><div class="wide">This content extends beyond the box and is clipped.</div></div>

Syntax

overflow: clip;

Examples

overflow: clip versus hidden

Run the CSS against the supplied HTML, then experiment with the values.

.box { width: 12rem; height: 5rem; border: 2px solid #2563eb; overflow: clip; }
.wide { width: 20rem; padding: 1rem; background: #dbeafe; color: #172b4d; }
  1. The inner box exceeds the outer box’s width.
  2. clip cuts off the excess without providing scrollbars or programmatic scrolling.
  3. Changing to hidden looks similar but changes the scroll-container behaviour. If users need the hidden content, an accessible scrolling or wrapping solution is preferable.
HTML used by this example
<div class="demo"><div class="box"><div class="wide">This content extends beyond the box and is clipped.</div></div></div>

Best practices

  • Clipping can make content or focus indicators unreachable. clip alone does not establish the same formatting context as hidden; use flow-root explicitly if that is needed. Check support for older browsers rather than relying on clipping for essential information.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading