Min-Height

vel-src: sizing.css

Utilities for setting the minimum height of an element.

Class	Properties
vel-min-h-0	min-height: 0px
vel-min-h-full	min-height: 100%
vel-min-h-screen	min-height: 100vh
vel-min-h-min	min-height: min-content
vel-min-h-max	min-height: max-content
vel-min-h-fit	min-height: fit-content

Examples

min-h-16 guarantees minimum height

Without min-height

Short

vel-min-h-16

Short

example.html

<div class="vel-flex vel-gap-4 vel-items-start">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:6px">Without min-height</p>
    <div style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:10px;width:120px;color:#94a3b8;font-size:12px">Short</div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:6px">vel-min-h-16</p>
    <div class="vel-min-h-16" style="background:#7c5cfc20;border:1px dashed #7c5cfc60;border-radius:6px;padding:10px;width:120px;color:#a87fff;font-size:12px">Short</div>
  </div>
</div>