Overflow

Thirteen utilities covering overflow, overflow-x, and overflow-y across four keyword values, plus the .is-clipped Bulma-compatibility alias. Every class uses !important — utilities exist to override component-level rules regardless of source order.

How it works

  • .is-clipped is a Bulma-compatibility alias for overflow: hidden. Originally meant to be toggled on <html> when a modal opens, but usable on any element.
  • For each value in (auto, hidden, visible, scroll), three classes are emitted:
    • .has-overflow-<value> — both axes
    • .has-overflow-x-<value> — horizontal axis only
    • .has-overflow-y-<value> — vertical axis only
  • That's 1 + 4 × 3 = 13 total classes (.is-clipped, .has-overflow-auto, .has-overflow-hidden, .has-overflow-visible, .has-overflow-scroll, plus the -x-* and -y-* variants).

Live

.has-overflow-hidden — clipped

Very long content that would otherwise spill outside the box but is clipped because the parent has has-overflow-hidden applied.

<div class="has-overflow-hidden" style="width: 12rem; height: 4rem; border: 1px solid var(--kc-default-fg);">
<p style="margin: 0;">Very long content that would otherwise spill outside the box but is clipped because the parent has has-overflow-hidden applied.</p>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-overflow')
);
Playground

.has-overflow-x-auto — horizontal scroll

One — Two — Three — Four — Five — Six — Seven — Eight — Nine — Ten
<div class="has-overflow-x-auto" style="width: 14rem; border: 1px solid var(--kc-default-fg);">
<div style="white-space: nowrap; padding: 0.5rem;">One — Two — Three — Four — Five — Six — Seven — Eight — Nine — Ten</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-overflow')
);
Playground

Markup

markup
<!-- Lock the body when a modal opens (Bulma compat) -->
<html class="is-clipped">…</html>

<!-- Clip overflow on both axes -->
<div class="has-overflow-hidden">…</div>

<!-- Horizontal scroll, no vertical scroll -->
<div class="has-overflow-x-auto has-overflow-y-hidden">
  <table>…</table>
</div>

<!-- Force vertical scroll even when content fits -->
<aside class="has-overflow-y-scroll">…</aside>

Variables

VariableDefaultNotes
$selector-prefix'.has-overflow-' (derived from variables.$selector-prefix-has)Prefix prepended to each $values entry. Override to rebrand all axis utilities (e.g. '.overflow-' for Tailwind parity) without changing .is-clipped.
$clipped-selector'.is-clipped' (derived from variables.$selector-prefix-is)The Bulma-compat alias. Override independently of $selector-prefix.
$values(auto, hidden, visible, scroll)Each entry emits three classes: <prefix><v>, <prefix>x-<v>, <prefix>y-<v>. Trim to drop unused keywords (e.g. scroll is rarely needed alongside auto).

The clipped alias is unconditional — it ships whenever $feature-helper-overflow is enabled.

Override example

app.scss
@use '@adnap/krysalicss/helper/overflow' with (
  // Trim to the values you actually use:
  $values: (auto, hidden),
);

Tokens consumed

None — purely structurel.