ScrollBoundaryContainer is used with anchor-based components such as Popover, Tooltip, Dropdown or ComboBox. ScrollBoundaryContainer is needed for proper positioning when the anchor-based component is anchored to an element that is located within a scrolling container. The use of ScrollBoundaryContainer ensures the anchor-based component remains attached to its anchor when scrolling. Don't use ScrollBoundaryContainer to add scrolling to a container, use Box's props instead.

Figma:

Web:

iOS:

Android:

A11y:

Props

Component props
Name
Type
Default
children
Required
React.Node
-
height
number | string
-

Use numbers for pixels: height={100} and strings for percentages: height="100%".

Overflow property only works for elements with a specified height. It is not required if the parent component sets the height. See the height variant for more details.

overflow
"scroll" | "scrollX" | "scrollY" | "auto"
-

Accessibility

Variants

Height

When scrolling is desired, we must explicitly set a height. Unless a height is set, the content will push the parent container's height.

In ScrollBoundaryContainer, height is an optional prop with a default value of 100%. If ScrollBoundaryContainer’s immediate parent is a component with a fixed height, do not pass a height to ScrollBoundaryContainer as seen in first example below. On the other hand, if there isn’t an immediate parent fixing the height, you must specify the ScrollBoundaryContainer height as seen in the second example below.

Popover within ScrollBoundaryContainer
Tooltips within ScrollBoundaryContainer

Built-in component

Modal and Sheet come with ScrollBoundaryContainer built-in, so any anchored components used in their children tree should work out-of-the-box. Passing an additional ScrollBoundaryContainer will break the existing styling on scroll.

The following example shows the internal ScrollBoundaryContainer in action. The main content of both Modal and Sheet is a form which includes Dropdown and ComboBox.

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.

Box
Box's overflow prop specifies what should happen if the content is larger than the bounding box. Box should not be replaced with ScrollBoundaryContainer if the goal is simply to allow Box to scroll when content overflows. ScrollBoundaryContainer is only needed when anchored components, such as Tooltip, Popover, ComboBox or Dropdown, are used within a container that could potentially scroll.

Modal / Sheet
Modal and Sheet come with ScrollBoundaryContainer built-in, so any anchored components used in their children tree should work out-of-the-box. Passing an additional ScrollBoundaryContainer will break the existing styling on scroll.

Tooltip / Popover / Dropdown / ComboBox
ScrollBoundaryContainer must be used around any of these components if they are used within a container that could possibly scroll. This is necessary to ensure the component remains attached to its anchor on scroll. If they are located within scrolling Modal or Sheet components, ScrollBoundaryContainer isn't needed as it's already built-in.