In this section, we will learn what the min-width property is and how to use it in CSS.

CSS min-width Property Definition and Usage

The `min-width` property is used to set a limit on the minimum width of an element.

Basically, using this property, we can set a limit on the minimum width that an element can have.

Note: again, using the min-width property won’t fix the width of an element! This property just put a limit on the minimum width that an element can take! If you want to fix the width of an element, use the width property, then.

CSS min-width Property Syntax

min-width: length|initial|inherit;

CSS min-width Property Value

The value we set for this property is a number with any relative or absolute units supported in CSS.

For example, if we set the value 10vw for this property, that means the min-width is 10 percent of the viewport’s width.

If you used % value for this property, be aware that the percentage is based on the width of the parent of the target element.

That means if we set the value of the min-width property for an element to 40% for example, then the value of the min-width property becomes 40% width of its parent element.

Note: the two global values “initial” and “inherit” can also be used as the value of this property.

Note: the default value is set to 0.

Example: min-width in CSS

See the Pen min-width in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.