Overflow utilities

Responsive utility classes which can be used to configure how content overflows an element.

Notation #

The overflow / overflow-x / overflow-y of an element can be set using the following classes:

  • .overflow-{type} / .overflow-{breakpoint}-{type}
  • .overflow-x-{type} / .overflow-x-{breakpoint}-{type}
  • .overflow-y-{type} / .overflow-y-{breakpoint}-{type}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {type} can be one of the following:

{type} Description
auto Sets overflow / overflow-x / overflow-y to auto (scrollbars show up only if needed)
hidden Sets overflow / overflow-x / overflow-y to hidden
visible Sets overflow / overflow-x / overflow-y to visible (browser default)
scroll Sets overflow / overflow-x / overflow-y to scroll (scrollbars always visible)

Examples #

Some of the classes are shown in action below.

.overflow-hidden
Computers are not just machines, but rather they are the embodiment of human ingenuity and creativity. They are the products of thousands of hours of hard work, innovation, and passion. We, as a society, have come a long way since the first computer was built, and the advancements we have made are truly remarkable. Today, computers have become an essential part of our lives. From smartphones to laptops, from desktops to tablets, we have a plethora of options to choose from, each with its unique set of features and capabilities.
.overflow-y-auto
Computers are not just machines, but rather they are the embodiment of human ingenuity and creativity. They are the products of thousands of hours of hard work, innovation, and passion. We, as a society, have come a long way since the first computer was built, and the advancements we have made are truly remarkable. Today, computers have become an essential part of our lives. From smartphones to laptops, from desktops to tablets, we have a plethora of options to choose from, each with its unique set of features and capabilities.
.overflow-sm-scroll
Computers are not just machines, but rather they are the embodiment of human ingenuity and creativity. They are the products of thousands of hours of hard work, innovation, and passion. We, as a society, have come a long way since the first computer was built, and the advancements we have made are truly remarkable. Today, computers have become an essential part of our lives. From smartphones to laptops, from desktops to tablets, we have a plethora of options to choose from, each with its unique set of features and capabilities.
HTML 
<div class="overflow-hidden">...</div>
<div class="overflow-y-auto">...</div>
<div class="overflow-sm-scroll">...</div>
Up next
Position utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.