min-size

Style shorthand for setting the min-width and min-height of an element.

Overview

Examples

Set minimum width and height together

Use min:* when both min-width and min-height should share the same value.

<button class="min:10x">    ...</button>

@layer utilities {    .min\:10x {        min-width: 2.5rem;        min-height: 2.5rem    }}

Preserve touch targets

Pair min:* with flexible padding when a control can grow with content but must never become too small.

<button class="min:11x px:md">    Save</button>

Set one logical axis

Use min-size-x:* for min-inline-size and min-size-y:* for min-block-size.

<section class="min-size-x:md min-size-y:12x">...</section>

Use percentages with care

Percentages resolve from the parent size on both axes. They are useful inside definite-size containers, but less predictable when the parent height is automatic.

<div class="min:50%">...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="min:8x min:10x@sm min:0@print">...</div>

Use min-width or min-height when only one axis needs a lower bound.