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
Syntax
css
/* <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
css
table {
min-width: 75%;
}
form {
min-width: 0;
}
Specifications
Specification |
---|
CSS Box Sizing Module Level 3 # min-size-properties |
Browser compatibility
BCD tables only load in the browser
See also
width
,max-width
- The box model,
box-sizing