= CSS scroll container
{c}
A <CSS scroll container> is a box whose scrollable overflow can be brought into view by changing a scroll position. Its viewing region is the <CSS scrollport>, normally coinciding with its padding box. The extent of the scrollable contents can be larger than that viewing region.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§2.3, scroll container, scrollport and scroll position]{ref}
Consider a simplified horizontal left-to-right example with a scrollport $100$ <CSS pixels> wide and contents occupying coordinates $0$ through $300$. At scroll position zero, the visible interval is $[0,100]$. At position $200$, it is $[200,300]$. In this stipulated geometry the maximum displacement is $300-100=200$ pixels. The example omits scrollbar size, padding complications and content extending in the opposite direction; it is an interval calculation, not a universal formula for every writing direction.
A scrollbar is not the definition of a <CSS scroll container>. `overflow: hidden` suppresses ordinary scrolling controls but can still permit programmatic scrolling, whereas `overflow: clip` forbids scrolling and does not create a scroll container. `overflow: auto` applies scrolling behavior as required by its rules.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§3.1, hidden, clip and auto]{ref}
Scrolling changes which part of the laid-out contents is viewed. Descendant <DOM nodes> outside the scrollport can still exist in the document; clipping alone does not remove them. Conversely, a large <DOM tree> does not guarantee a large scrollable region if layout or overflow rules prevent it.
Distinguish this viewing mechanism from <CSS containing block> geometry and <CSS flow-root>. A containing block supplies layout references, while an independent formatting context governs layout participation. Neither term alone establishes that the contents can be scrolled.
Back to article page
