Scrollable

Scrollable

Make a containing box scrollable when scrolling is available.

Scrollable: Auto

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-scrollable">Scrollable Content Here</div>

About Scrollable

Use the scrollable utility when you need to provide scrolling within a section of a page. For example, when the content within an element exceeds either the width or height of the element, applying .slds-scrollable--y provides a vertical scrollbar, while .slds-scrollable--x adds a horizontal scrollbar.


Overview of CSS Classes

Selector.slds-scrollable
Summary

Forces element to scroll horizontally and vertically when content exceeds element's width and height

Restrict*
ModifierTrue
Selector.slds-scrollable_none
Summary

Forces overflow items to not scroll within element's width and height

Restrict*
ModifierTrue
Selector.slds-scrollable_y
Summary

Forces element to scroll vertically when content exceeds element's height

Restrict*
ModifierTrue
Selector.slds-scrollable_x
Summary

Forces element to scroll horizontally when content exceeds element's width

Restrict*
ModifierTrue