min-width

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers sinceJuly 2015.

Themin-widthCSSproperty sets the minimum width of an element. It prevents theused valueof thewidthproperty from becoming smaller than the value specified formin-width.

Try it

The element's width is set to the value ofmin-widthwhenevermin-widthis larger thanmax-widthorwidth.

Syntax

css
/* <length> value */
min-width: 3.5em;
min-width: anchor-size(width);
min-width: anchor-size(--myAnchor self-inline, 200%);

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

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fit-content(20em);
min-width: stretch;

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

Values

<length>

Defines themin-widthas an absolute value.

<percentage>

Defines themin-widthas a percentage of the containing block's width.

auto

The default value. The source of the automatic value for the specified element depends on its display value. For block boxes, inline boxes, inline blocks, and all table layout boxesautoresolves to0.

Forflex itemsand grid items, the minimum width value is either the specified suggested size, such as the value of thewidthproperty, the transferred size, calculated if the element has anaspect-ratioset and the height is a definite size, otherwise, themin-contentsize is used. If the flex or grid item is ascroll container,or if a grid item spans more than one flexible column track, the automatic minimum size is0.

max-content

The intrinsic preferredmin-width.

min-content

The intrinsic minimummin-width.

fit-content

Use the available space, but not more thanmax-content,i.e.min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Uses thefit-contentformula with the available space replaced by the specified argument, i.e.min(max-content, max(min-content, argument)).

stretch

Limits the minimum width of the element'smargin boxto the width of itscontaining block.It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to100%but applying the resulting size to the margin box rather than the box determined bybox-sizing.

Note:To check aliases used by browsers for thestretchvalue and its implementation status, see theBrowser compatibilitysection.

Formal definition

Initial valueauto
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inheritedno
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typealength,percentageor calc();

Formal syntax

min-width =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis>,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]?,<length-percentage>?)

<calc-size-basis> =
<intrinsic-size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[['+'|'-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[['*'|'/']<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
(<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Examples

Setting minimum element width

css
table {
min-width: 75%;
}

form {
min-width: 0;
}

Specifications

Specification
CSS Box Sizing Module Level 3
#min-size-properties
CSS Box Sizing Module Level 4
#sizing-values

Browser compatibility

BCD tables only load in the browser

See also