The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.

When to Use

Use a scroll container if:

• You want to provide a content area that would otherwise be partly or completely covered or hidden.

Do not use a scroll container if:

• A page uses a full screen element that can handle vertical scrolling.
• You are using other controls that come with their own scroll container, such as a dialog, timeline, or panel.
• You plan to nest different scroll containers that scroll in the same direction.
• You plan to have several scroll containers with different scroll directions (horizontally and vertically) on one page. This may lead to confusion about when to use which scrolling direction and how it all fits together.

Behavior and Interaction

Responsiveness

The scroll container is responsive and adapts to the screen size. By default, the width consumes the complete available width and the height reflects the height of the content. You can also set a fixed width or height. Always use responsive controls for the content, so that they also adapt to the available width and height.

Related Links