Overflow 1.2.2

Control how content overflows an element's box. Deutsch: Overflow

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Clip or scroll overflowing content with overflow utilities (also on display.css).

When not

Ensure keyboard users can reach scrolled content; avoid trapping focus in overflow regions.

Overflow Classes

<div class="velin-overflow-auto">Auto scrollbar when needed</div>
<div class="velin-overflow-hidden">Clip overflow content</div>
<div class="velin-overflow-visible">Content may overflow</div>
<div class="velin-overflow-scroll">Always show scrollbars</div>

Auto scrollbar when needed

Clip overflow content

Content may overflow

Always show scrollbars

Per-axis Overflow

Control overflow on each axis independently:

<div class="velin-overflow-x-auto velin-overflow-y-hidden">
  Horizontal scroll, vertical clip
</div>
<div class="velin-overflow-x-hidden velin-overflow-y-auto">
  Vertical scroll, horizontal clip
</div>

Horizontal scroll, vertical clip

Vertical scroll, horizontal clip