What is the difference between overflow hidden and overflow clip?

overflow: hidden clips content AND creates a scroll container (you can still scroll programmatically with JavaScript). overflow: clip clips content but does NOT create a scroll container — content is truly inaccessible. clip also does not create a new block formatting context. Use clip when you genuinely want to cut off content with no way to access it.

How do I hide the scrollbar but keep scrolling?

Use scrollbar-width: none (Firefox) and ::-webkit-scrollbar { display: none } (Chrome/Safari). The element remains scrollable but the scrollbar is invisible. Keep in mind this can hurt usability — users may not realize content is scrollable. Consider using overflow: auto with a thin custom scrollbar instead.

CSS Overflow - Hidden, Scroll, Auto Explained

Q: Why does overflow hidden break position sticky?

position: sticky sticks relative to its nearest scrolling ancestor. overflow: hidden (or auto/scroll) on a parent creates a scrolling container, which becomes the sticky reference. If that parent is not actually scrolling (because the content fits), sticky has nothing to stick to and appears broken. The fix: remove overflow from the sticky element's ancestors, or restructure so the sticky element is inside the scrolling container.

Overflow Values

The overflow property controls how content is handled when it is larger than its container. There are five values:

visible (default) — content spills outside the box
hidden — clips content, creates a scroll container (JS can scroll it)
scroll — always shows scrollbars, even if content fits
auto — shows scrollbars only when content overflows
clip — clips content, does NOT create a scroll container

Visual Comparison

overflow: visible (default)

This content overflows its container because the box is only 60px tall. The text keeps going and spills out below the box boundaries. This is the default behavior.

overflow: hidden

This content is clipped at the container boundary. You cannot see the rest. But JavaScript can still scroll this element programmatically using scrollTo(). This creates a block formatting context.

overflow: scroll

Scrollbars always appear, even if the content fits. On macOS these may be overlay scrollbars. On Windows you will see persistent scrollbar tracks. Scroll down to see the rest of this text. This is useful when you want consistent layout regardless of content size.

overflow: auto

Scrollbars appear only when needed. If the content fits, no scrollbar. If it overflows, a scrollbar appears. This is usually the best choice for scrollable containers. Scroll down to see more content that extends below the visible area of this container.

overflow-x and overflow-y

Control horizontal and vertical overflow independently:

.code-container {
  overflow-x: auto;    /* horizontal scroll for wide code */
  overflow-y: hidden;  /* no vertical scroll */
}

.sidebar {
  overflow-x: hidden;  /* clip horizontal overflow */
  overflow-y: auto;    /* scroll vertically when needed */
}
      

const reallyLongLine = "This is a very long line of code that extends beyond the container width. You can scroll horizontally to see all of it. overflow-x: auto handles this.";

text-overflow: ellipsis

Truncate overflowing text with an ellipsis. Requires three properties to work:

.truncate {
  overflow: hidden;         /* clip the text */
  text-overflow: ellipsis;  /* show ... */
  white-space: nowrap;      /* prevent wrapping */
}

/* Multi-line truncation */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
      

Single line truncation

This is a very long piece of text that will be truncated with an ellipsis because it exceeds the container width and cannot wrap to the next line.

Multi-line clamp (3 lines)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. This text will be clamped to three lines. Everything beyond the third line is hidden with an ellipsis showing where the text was cut.

Hidden Scrollbar Trick

Keep scrolling functional but hide the scrollbar visually:

.scroll-no-bar {
  overflow: auto;
  scrollbar-width: none;          /* Firefox */
}
.scroll-no-bar::-webkit-scrollbar {
  display: none;                  /* Chrome, Safari, Edge */
}
      

Use sparingly. Hidden scrollbars reduce discoverability — users may not realize they can scroll.

Common Gotchas

overflow: hidden breaks sticky positioning. A hidden overflow ancestor creates a scrolling context that traps sticky elements. Move the overflow to a different wrapper or restructure your layout.
overflow: hidden on the body prevents page scrolling. Use it carefully on <html> and <body> — typically only for modal backgrounds where you want to lock scroll.
Setting overflow-x: hidden but overflow-y: visible does not work as expected. If one axis is hidden/scroll/auto, the other automatically becomes auto instead of visible. This is by spec.

Frequently Asked Questions

What is the difference between overflow hidden and clip?

hidden clips content and creates a scroll container — JS can still scroll it. clip clips content but does not create a scroll container. Use clip when you truly want content inaccessible.

Why does overflow hidden break position sticky?

sticky sticks relative to its nearest scrolling ancestor. overflow: hidden on a parent creates a scrolling container. If that parent is not actually scrolling, sticky has nothing to stick to. Fix: remove overflow from sticky ancestors.

How do I hide scrollbars but keep scrolling?

Use scrollbar-width: none for Firefox and ::-webkit-scrollbar { display: none } for Chrome/Safari. The element remains scrollable but the scrollbar is invisible. Consider UX implications — users may not realize content is scrollable.

Related Tools

CSS Position Guide z-index Guide CSS Flexbox Reference CSS Units Guide