Docs / Flex Shrink

Flex Shrink

vel-src: flexbox.css

Utilities for controlling how flex items shrink.

ClassProperties
vel-shrinkflex-shrink: 1
vel-shrink-0flex-shrink: 0

Examples

Shrink vs no shrink

vel-shrink — shrinks to fit
vel-shrink-0 (stays full size)
example.html
<div class="vel-flex vel-gap-3" style="width:300px">
  <div class="vel-shrink vel-bg-primary vel-text-white vel-rounded-md" style="padding:12px;min-width:0">vel-shrink — shrinks to fit</div>
  <div class="vel-shrink-0 vel-bg-danger vel-text-white vel-rounded-md" style="padding:12px 20px;white-space:nowrap">vel-shrink-0 (stays full size)</div>
</div>