Shadi Barhoumi

Overflow in CSS

Scroll containers and hidden overflow with absolute positioning

December 28, 2022

Overflow in flow layout

In flow layout, overflow does not affect the layout, and contents can overrun container bounds.

Gotchas with overflow:scroll

overflow: scroll  adds scrollbars that are always-visible on Windows and Linux, but MacOS with a trackpad, they're hidden and only visible when you're scrolling. If you connect a wired mouse, they'll become always-visible. You can disable scrollbar-hiding to see what your app will look like for users on other platforms.

overflow: hidden hygiene

Whenever you use overflow: hidden in your codebase, always add a comment explaining why you added it, since it's quite difficult to tell why it's there just from looking at the CSS. This will prevent you from removing it during a refactor and unknowingly breaking your layout.

Scroll containers

overflow: scroll, overflow: auto, or overflow: hidden all turn the element to which it's applied into a scroll container.

A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow.

The scroll container allows the user to scroll through parts of the overflow region that would otherwise be clipped and hidden from view. The visible part of the scroll container is referred to as the scrollport.1

overflow: hidden also creates a scroll container in the way that overflow: scroll does, except the scrollbar is removed. The element's contents are still technically scrollable, though.

This means that interactive links, buttons, and inputs will become visible when focused (e.g. via tabbing).

Scroll containers will only scroll when their contents overflow their boundaries.

overflow: clip

overflow: clip is similar to overflow: hidden, except that a scroll container isn't created.

You can clip in one direction while keeping your content visible in another direction.2

This is a new property, so there are some quirks across browsers. If the container has a border-radius set, this will force the clipping to happen in both directions on Chrome.

Horizontal overflow

If you want inline elements that overflow their container to scroll horizontally, you'll needwhite-space: nowrap. This will prevent a row of inline elements from wrapping around so that an overflow: auto applied to the same container will allow horizontal scrolling.

For an position: absolute element to actually be cut off by an overflow: hidden applied to its parent container, the parent container must actually contain it (i.e. it must have position: relative applied).

Similarly, overflow: auto applied to an absolutely-positioned child inside a relatively-positioned parent will allow the child to be scrolled into view if it's cut off.

Remember, position: fixed children are not contained by a position: relative parent. They're contained by the initial containing block.

The containing block in which the root element (<html>) resides is a rectangle called the initial containing block. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).3

Since position: fixed elements aren't contained by anything other the initial containing block, they can't be hidden with overflow: hidden.

Some of this content is based on Josh Comeau's excellent CSS resources.