Overflow

Utilities for controlling how an element handles content that is too large for the container.

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.

<x.div overflow="visible" h={24}>
  Lorem ipsum dolor sit amet...
</x.div>

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 shows scrollbars, this utility will only show them if scrolling is necessary.

<x.div overflow="auto" h={32}>
  Lorem ipsum dolor sit amet...
</x.div>

Hidden

Use overflow="hidden" to clip any content within an element that overflows the bounds of that element.

<x.div overflow="hidden" h={32}>
  Lorem ipsum dolor sit amet...
</x.div>

Scroll horizontally if needed

Use overflowX="auto" to allow horizontal scrolling if needed.

<x.div overflowX="auto">QrLmmW69vMQDtCOg48jidqvvWD2...</x.div>

Scroll vertically if needed

Use overflowY="auto" to allow vertical scrolling if needed.

<x.div overflowY="auto" h={32}>
  Lorem ipsum dolor sit amet...
</x.div>

Scroll horizontally always

Use overflowX="scroll" to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

<x.div overflowX="scroll">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</x.div>

Scroll vertically always

Use overflowY="scroll" to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

<x.div overflowY="scroll" h={32}>
  Lorem ipsum dolor sit amet...
</x.div>

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.

<x.div overflow="scroll" h={32}>
  Lorem ipsum dolor sit amet...
</x.div>

Responsive

To apply an overflow utility only at a specific breakpoint, use responsive object notation. For example, adding the property overflow={{ md: "auto" }} to an element would apply the overflow="auto" utility at medium screen sizes and above.

<x.div overflow={{ md: 'auto' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.