Flex Grow

vel-src: flexbox.css

Utilities for controlling how flex items grow.

Class	Properties
vel-grow	flex-grow: 1
vel-grow-0	flex-grow: 0

Examples

Grow vs no grow

vel-grow (takes available space)

vel-grow-0

example.html

<div class="vel-flex vel-gap-3">
  <div class="vel-grow vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px">vel-grow (takes available space)</div>
  <div class="vel-grow-0 vel-bg-surface-3 vel-text-muted vel-rounded-md" style="padding:12px 20px;border:1px solid #1e2d45;white-space:nowrap">vel-grow-0</div>
</div>