Overflow

vel-src: layout.css

Utilities for controlling how an element handles content that is too large for the container.

Class	Properties
vel-overflow-auto	overflow: auto
vel-overflow-hidden	overflow: hidden
vel-overflow-visible	overflow: visible
vel-overflow-scroll	overflow: scroll
vel-overflow-x-auto	overflow-x: auto
vel-overflow-x-hidden	overflow-x: hidden
vel-overflow-y-auto	overflow-y: auto
vel-overflow-y-hidden	overflow-y: hidden
vel-overflow-y-scroll	overflow-y: scroll

Examples

Overflow hidden vs scroll

vel-overflow-hidden

This content is wider than its container and gets clipped.

vel-overflow-auto

This content is wider than its container and scrolls.

example.html

<div class="vel-flex vel-gap-4">
  <div>
    <p style="color:#64748b;font-size:12px;margin-bottom:6px">vel-overflow-hidden</p>
    <div class="vel-overflow-hidden" style="width:150px;height:80px;background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:8px">
      <div style="width:300px;color:#94a3b8;font-size:12px">This content is wider than its container and gets clipped.</div>
    </div>
  </div>
  <div>
    <p style="color:#64748b;font-size:12px;margin-bottom:6px">vel-overflow-auto</p>
    <div class="vel-overflow-auto" style="width:150px;height:80px;background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:8px">
      <div style="width:300px;color:#94a3b8;font-size:12px">This content is wider than its container and scrolls.</div>
    </div>
  </div>
</div>