Overflow

This utility controls what happens to content that is too big to fit into an area.

Determines how content that overflows the bounds of container is handled (visible, hidden, scroll, auto),

Class list

Class name	Styles
co-overflow-visible	overflow: visible;
co-overflow-x-visible	overflow-x: visible;
co-overflow-y-visible	overflow-y: visible;
co-overflow-hidden	overflow: hidden;
co-overflow-x-hidden	overflow-x: hidden;
co-overflow-y-hidden	overflow-y: hidden;
co-overflow-scroll	overflow: scroll;
co-overflow-x-scroll	overflow-x: scroll;
co-overflow-y-scroll	overflow-y: scroll;
co-overflow-auto	overflow: auto;
co-overflow-x-auto	overflow-x: auto;
co-overflow-y-auto	overflow-y: auto;

Examples

overflow: scroll

Overflow will display scrollbar when exceeds given height, width.

<div class="co-overflow-scroll">
    Lorem ipsom dolor sit amet, consectetur...
</div>

Responsive design

Class name
xs:co-overflow-visible
sm:co-overflow-hidden
md:co-overflow-scroll
lg:co-overflow-auto
xl:co-overflow-scroll

Usage of responsive class

<div class="md:co-overflow-hidden">
   ...
</div>