Overflow utilities

Halfmoon comes with responsive utility classes which can be used to set the overflow, overflow-x or overflow-y of elements.

Notation #

The class names for the overflow utilities come in the the following formats:

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

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

The {value} can be one of the following:

{value} Description
auto Sets overflow or overflow-x or overflow-y to auto
scroll Sets overflow or overflow-x or overflow-y to scroll
hidden Sets overflow or overflow-x or overflow-y to hidden

These classes are particularly useful when combined with the sizing utilities (opens in new tab), such as in this example (opens in new tab). You can see some of these classes in action in the example below:

<!-- Overflow auto -->
<div class="overflow-auto w-200 h-100"> <!-- w-200 = width: 20rem (200px), h-100 = height: 10rem (100px) -->
  <div class="w-300 h-200"> <!-- w-300 = width: 30rem (300px), h-200 = height: 20rem (200px) -->
    ...
  </div>
</div>
<!-- Overflow-x scroll, overflow-y hidden -->
<div class="overflow-x-scroll overflow-y-hidden w-200 h-100"> <!-- w-200 = width: 20rem (200px), h-100 = height: 10rem (100px) -->
  <div class="w-300 h-200"> <!-- w-300 = width: 30rem (300px), h-200 = height: 20rem (200px) -->
    ...
  </div>
</div>
<!-- Overflow-x hidden, overflow-x scroll -->
<div class="overflow-x-hidden overflow-y-scroll w-200 h-100"> <!-- w-200 = width: 20rem (200px), h-100 = height: 10rem (100px) -->
  <div class="w-300 h-200"> <!-- w-300 = width: 30rem (300px), h-200 = height: 20rem (200px) -->
    ...
  </div>
</div>
<!-- Overflow-y hidden, overflow-y auto on medium screens and up (width > 768px) -->
<div class="overflow-y-hidden overflow-y-md-auto w-250 h-200"> <!-- w-250 = width: 25rem (250px), h-200 = height: 20rem (200px) -->
  <div class="h-250"> <!-- h-250 = height: 25rem (250px) -->
    ...
  </div>
</div>

In the above example, the inner boxes are given larger widths and heights than the outer containers, and then the overflow, overflow-x and/or overflow-y is set using the utility classes described on this page.

Please note that multiple classes (for different breakpoints) can be used on the same element, to control the overflow differently based on the screen size. This is shown in the fourth container above, where the overflow-y is set to auto only on medium screens and up (width > 768px). Otherwise, it is set to hidden.