Flex Shrink

vel-src: flexbox.css

Utilities for controlling how flex items shrink.

Class	Properties
vel-shrink	flex-shrink: 1
vel-shrink-0	flex-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>