Overflows

Sometimes there is more content than can fit in a particular region of a layout.

X and/or Y overflows

• overflow-x

Use overflow-x when you may need a sideways scroll. (overflow-x shows horizontal scroll but not vertical scroll.) E.g. when you have an oversized table. Or, you may have a simply sideways-scrolling gallery.

• overflow-y

Use overflow-y when you have content that is too tall for its wrapper. (overflow-y shows vertical scroll but not horizontal scroll.) E.g. see JS modal with scrollable content.

• overflow-xy

Use overflow-xy when you have both width and height constraints but you want to show both horizontal and vertical scroll. This utility may be useful if you want to show a large map or oversized table.

Overflow hidden

• overflow-hidden

Use overflow-hidden when you have too much content for displaying in a block element that has a constrained width and/or height, but you don’t want to show either horizontal or vertical scroll.