min-width

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The element's width is set to the value of min-width whenever min-width is larger than max-width or 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(20em);

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

Values

<length>: Defines the min-width as an absolute value.
<percentage>: Defines the min-width as a percentage of the containing block's width.
auto: The browser will calculate and select a min-width for the specified element.
max-content: The intrinsic preferred min-width.
min-content: The intrinsic minimum min-width.
fit-content(<length-percentage>): Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).

Formal definition

Initial value	auto
Applies to	all elements that accept width or height
Inherited	no
Computed value	as specified, with <length-percentage> values computed
Animation type	by computed value, recursing into fit-content()

Formal syntax

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)

Examples

Setting minimum element width

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

css properties min-width