W3cubDocs

/CSS

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.

Try it

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 but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length
Animation type	a length, percentage or calc();

Formal syntax

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

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

Examples

Setting minimum element width

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

Specifications

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

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`min-width`	1	12	1 CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	7	4 CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Opera supports applying `min-width` to `table` elements.	1	4.4	18	4 CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	10.1	1	1.0
`auto`	21 Chrome uses `auto` as the initial value for `min-width`.	12 Edge uses `auto` as the initial value for `min-width`.	34 16–22 Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.	No	12.1 Opera uses `auto` as the initial value for `min-width`.	7	37 Chrome uses `auto` as the initial value for `min-width`.	25 Chrome uses `auto` as the initial value for `min-width`.	34 16–22 Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.	14 Opera uses `auto` as the initial value for `min-width`.	7	1.5 Samsung Internet uses `auto` as the initial value for `min-width`.
`fit-content`	4625	7979	3 Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	No	3315	117	46≤37	46	4 Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	33	117	5.0
`fit-content_function`	No	No	91	No	No	No	No	No	No	No	No	No
`max-content`	4625	7979	663	No	3315	112	46≤37	46	664	33	111	5.0
`min-content`	462525–48	7979	663	No	33≤15≤15–35	112	464.44.4–48	462525–48	664	33≤14≤14–35	111	5.01.51.5–5.0
`stretch`	22	79	No	No	15	No	4.4	25	No	14	No	1.5