Overflow utilities are a class group designed to modify the overflow properties of elements. With its flexible and responsive structure, this utility set aims to fulfill all the requirements for managing element overflow in your projects through simple class assignments.

In JTB_MD, the designated classbase for all overflow classes, irrespective of their primary purpose, is .jtbOF.

How to use

To control the overflow property of any element in your projects, effortlessly apply the corresponding JTB_MD class:

.jtbOF-[scroll | hidden | auto | visible]

.jtbOF-scroll
This text must be a long text to show how overflow property of its parent works. So do not read all of them but check how it is positioned on container..jtbOF-hidden
This text must be a long text to show how overflow property of its parent works. So do not read all of them but check how it is positioned on container..jtbOF-auto
This text must be a long text to show how overflow property of its parent works. So do not read all of them but check how it is positioned on container..jtbOF-visible
This text must be a long text to show how overflow property of its parent works. So do not read all of them but check how it is positioned on container.

                            <!-- Element with overflow: scroll -->
<div class='jtbOF-scroll'>...</div>

Responsiveness

It is also possible to make your element's overflow attribute behave differently based on the screen sizes of clients. To activate this utility, simply add the related screen breaker (defined in Breakpoints seciton) at the end of the corresponding class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
All classes	Active	`.jtbOF-scroll-xxl`