min-width

The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.

.wrapper {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

Check out this Pen!

Be mindful when assuming min-width is inherited as this property does not inherit from other parent elements. If authors define a width using an absolute value (px, pt, in, cm, mm), the min-width will not take affect as the width has been defined indefinitely. For example, if a value of 200px is used as a width length, your min-width value of 100px will not be neccessary as you have already specified an absolute value for the width (i.e. 200px). The best way to use min-width is to define a width value as a percentage and use an absolute value for the min-width property otherwise using a percentage value for for both min-width and width will not produce the expected result.

Browser support

Related properties

Almanac on Jan 15, 2021

height

.element { height: 500px; }

Sara Cope

Almanac on Jan 15, 2021

max-height

.element { max-height: 3rem; }

Sara Cope

Almanac on Jan 15, 2021

max-width

.element { max-width: 100%; }

Sara Cope

Almanac on May 26, 2021

min-height

.element { min-height: 100vh; }

Sara Cope

Almanac on Mar 3, 2021

width

.elment { width: 50%; }

Sara Cope