Overflow
Utilities for controlling how an element handles content that is too large for the container
Class reference
Visible
Use .overflow-visible to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
Auto
Use .overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always show scrollbars, this utility will only show them if scrolling is necessary.
Hidden
Use .overflow-hidden to clip any content within an element that overflows the bounds of that element.
Scroll horizontally if needed
Use .overflow-x-auto to allow horizontal scrolling if needed.
Scroll vertically if needed
Use .overflow-y-auto to allow vertical scrolling if needed.
Scroll horizontally always
Use .overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
Scroll vertically always
Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
Scroll in all directions
Use .overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.
Responsive
To apply an overflow utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:overflow-scroll to an element would apply the overflow-scroll utility at medium screen sizes and above.
<div class="overflow-auto md:overflow-scroll ...">
Lorem ipsum dolor sit amet...
</div>For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5