Engrain by ByteRush

WEB.09.05 Mid-level· 10 minCore — asked often

Overflow, scrolling and containment: carousels and panels without JavaScript

Overflow values and scroll containers, CSS scroll snap for carousels, overscroll-behavior to stop scroll chaining, scrollbar-gutter to stop layout jumps, and CSS containment for performance.

Comes up in: Web fundamentals

Learn#

Rhea’s product carousel uses a 14 KB JavaScript library. On phones, swipes stop halfway between cards, and the page scrolls when the user reaches the end of the carousel. CSS can do all of this.

Scroll snap makes a scroll container settle on chosen positions after the user scrolls:

.track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.card { flex: 0 0 280px; scroll-snap-align: start; }

A scroll container is any box whose overflow is auto, scroll or hidden. It clips its content and can be scrolled, by the user or by code.

overscroll-behavior: contain stops scroll chaining: reaching the end of the carousel no longer scrolls the whole page.

Letting go between two cardsStep 1 of 4

State

  • track: scroll container, snap x mandatory

The track has overflow-x: auto, so it is a scroll container. scroll-snap-type: x mandatory turns on snapping.

Read the steps as text
  1. The track has overflow-x: auto, so it is a scroll container. scroll-snap-type: x mandatory turns on snapping.
  2. Each card has scroll-snap-align: start. The browser records a snap position at each card's left edge.
  3. The user swipes and lets go at scrollLeft 400. The browser picks the nearest snap point.
  4. It settles at 296: card 2 lines up with the left edge. No JavaScript ran.

Predict#

Predict first

A box has overflow: hidden. Can it still be scrolled?

Interview angle#

Say it like this — about 30 seconds

“Overflow auto or scroll makes an element a scroll container. So does hidden, which only removes user scrolling. Clip truly clips. For carousels I use scroll snap. I set scroll-snap-type on the container and scroll-snap-align on the items. That gives native swipes with no JavaScript. overscroll-behavior contain stops scroll chaining into the page. scrollbar-gutter stable reserves space so layout does not jump when a scrollbar appears. CSS containment tells the browser a part of the page is independent. Then it can skip work.”

Stays on your device. Nothing is uploaded.
Follow-up overflow: hidden vs overflow: clip?
With hidden, code can still scroll the box. With clip, nothing can scroll it, and sticky children still use the outer scroller.
Follow-up What does contain: content do?
It promises that the box’s layout and paint do not affect the rest of the page. The browser can then limit its work to that box.
Follow-up mandatory vs proximity snapping?
mandatory always settles on a snap point; proximity only snaps when the scroll ends near one, better for long content.

Practice#

Guided

Model what the browser does with scroll-snap-align: compute the snap points, then pick the nearest one.

Done when

  • start points are each item’s left edge; center points center the item in the viewport.
  • Points are clamped to the scrollable range.
  • snap returns the nearest point, the earlier one on ties.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

Which two properties make a CSS carousel snap?

scroll-snap-type on the container, scroll-snap-align on the items.

What does overscroll-behavior: contain stop?

Scroll chaining: reaching the end no longer scrolls the parent or page.

What does scrollbar-gutter: stable prevent?

Layout shifts when a scrollbar appears or disappears.

Can an overflow: hidden box be scrolled by code?

Yes. Use overflow: clip for no scrolling at all.

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round
visible lets content spill out; hidden, scroll and auto create scroll containers; clip clips without one. Setting only overflow-x to anything except visible makes overflow-y compute to auto.
Check yourself: Which overflow value does not create a scroll container?

clip (and visible).

How it works underneathSenior rounds

Snap positions come from each item’s scroll-snap-align box, adjusted by scroll-padding on the container and scroll-margin on the item. scroll-padding-top keeps anchors from hiding under a sticky header .

Check yourself: Why does scroll-padding help with a sticky header?

It moves the snap and scrollIntoView target down so content is not hidden under the header.

Edge cases and trapsWhere people slip

Classic scrollbars take space, so content jumps when they appear. scrollbar-gutter: stable reserves the space: Chrome 94, Firefox 97, Safari 18.2.
Overlay scrollbars, as on most phones, take no space.

Check yourself: When does a classic scrollbar change layout?

When it appears on overflow and takes space, unless scrollbar-gutter reserves it.

In productionStaff-level answers
Containment (contain: layout paint or content) promises a subtree is independent, so changes inside it do not trigger work outside. content-visibility: auto adds skipping off-screen work (WEB.02.02) .
Check yourself: Which containment value is a safe default for independent widgets?

contain: content (layout, paint and style).

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.