min-width

min-width

The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The element width is set to the value of min-width whenever min-width is larger than max-width or whenever min-width is larger than width.

Syntax

/* <length> value */
min-width: 3.5em;

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Values

<length>

The fixed minimum width. See <length> for possible units. Negative values make the declaration invalid.

<percentage>

The fixed minimum width expressed as a <percentage> of containing block's width. Negative values make the declaration invalid.

auto

The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.

max-content

The intrinsic preferred width.

min-content

The intrinsic minimum width.

fill-available

The containing block width minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, available.

fit-content

Defined as min(max-content, max(min-content, fill-available).

Formal syntax

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

Examples

table { min-width: 75%; }

form { min-width: 0; }

Specifications

Browser compatibility

[1] CSS 2.1 explicitly leaves the behavior of min-width with <table> undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.

[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines available and not fill-available. Also the definition of fit-content is simpler than in CSS3 Intrinsic.

[3] WebKit also implements an earlier proposal, the keyword intrinsic.

[4] These implementations where implementing a slightly simpler behavior for this keyword: it computed to min-content on flex items, and it computes to 0 on everything else.

[5] In some browsers, on iOS, a <button> element in its native (default) configuration will not respond to min-width. This problem is due to native buttons. A <span> inside a native button will exhibit the same problem, despite having "display:inline-block" set. When changes are made to other style parameters and the browser is forced to abandon the native button, the min-width setting takes affect.

See also

• width, max-width, min-height
• The box model, box-sizing