Scrollable wraps content that exceeds its container while preserving layout—chat feeds, inspector bodies, long settings forms. It standardizes scrollbar visibility and density (smallScrollbar) so nested panes in dispatch feel consistent across browsers.
- Vertical overflow in fixed-height panels (drawers, split panes, modals).
- Horizontal overflow for wide timelines or code viewers with deliberate sideways scroll.
- Chat or log feeds that should mount at the bottom (
scrollReverse patterns).
- Whole-page scrolling managed by the browser—avoid nested scroll unless the layout demands panes.
- Lists of thousands of simple rows—consider Virtualized list.
Scrollbar visibility: auto, always, hidden per axis; smallScrollbar for dense tables and side panels.
Viewport clipping children; scrollbars per configuration; may interact with flex grow/shrink parents.
- No text inside
Scrollable itself—children own copy; ensure padding tokens prevent content touching edges.
- Programmatic scroll (refs) for “jump to message” features must not fight user manual scroll without clear UX.
- Nested scroll areas need distinct visual boundaries—users should always know which region scrolls.
- Do set explicit heights or flex constraints; unconstrained flex children may refuse to scroll.
- Do use
scrollReverse for feeds where newest items append at the bottom.
- Don’t nest many independent scrollers in one small modal—simplify layout.
- Don’t hide scrollbars on axes where content truly overflows unless an alternate pan gesture exists and is discoverable.
- Keyboard scrollers and focusable children inside panels remain reachable; avoid
overflow: hidden traps that strand focus.
