Overflow

When to use it

The Overflow utility is used to control how content that overflows its container is handled. It provides a way to manage overflow content by cropping, displaying, or adding scrollbars.

Variants

• Visible: Use the .u-overflow--visible class to make overflow content visible.
• Auto: Use the .u-overflow--auto class to add scrollbars to overflow content.
• Hidden: Use the .u-overflow--hidden class to hide overflow content.

What it looks like

Code examples

Visible

<p class="u-overflow--visible">visiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisible</p>

Auto

<p class="u-overflow--auto">autoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoauto</p>

Hidden

<p class="u-overflow--hidden">hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden</p>

Accessibility notes

For larger scrolling containers, please see Cropped.