Max-Height

vel-src: sizing.css

Utilities for setting the maximum height of an element.

Class	Properties
vel-max-h-none	max-height: none
vel-max-h-full	max-height: 100%
vel-max-h-screen	max-height: 100vh
vel-max-h-fit	max-height: fit-content
vel-max-h-16	max-height: 4rem
vel-max-h-32	max-height: 8rem
vel-max-h-64	max-height: 16rem
vel-max-h-96	max-height: 24rem

Examples

Capped height with scroll

vel-max-h-24 limits height to 6rem.

Content below gets scrolled.

More content here.

Even more content.

example.html

<div class="vel-max-h-24 vel-overflow-auto" style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:12px">
  <p style="color:#94a3b8;font-size:13px">vel-max-h-24 limits height to 6rem.</p>
  <p style="color:#64748b;font-size:13px;margin-top:8px">Content below gets scrolled.</p>
  <p style="color:#64748b;font-size:13px;margin-top:8px">More content here.</p>
  <p style="color:#64748b;font-size:13px;margin-top:8px">Even more content.</p>
</div>