CSS: min-width property

This CSS tutorial explains how to use the CSS property called min-width with syntax and examples.

Description

The CSS min-width property defines the minimum width of the content area of an element.

The syntax for the min-width CSS property is:

min-width: value;

value

The min-width of the content area of an element. It can be one of the following:

Value	Description
fixed	Fixed value expressed in pixels, em's, etc. div { min-width: 55px; } div { min-width: 40em; }
percentage	Percentage value div { min-width: 25%; }
inherit	Indicates that the element will inherit the min-width from its parent element div { min-width: inherit; }

The content area of an element is inside the padding, border, and margin of the element.
The CSS min-width property applies to block level and replaced elements.
The CSS min-width property is used to prevent the CSS width from becoming smaller than the value specified in the CSS min-width property.
When the value is provided as a percentage, it is relative to the width of the containing block.
See also height, width, max-height, max-width, min-height.

The CSS min-width property has basic support with the following browsers:

We will discuss the min-width property below, exploring examples of how to use this property in CSS.

Let's look at a CSS min-width example where we have provided the min-width as a fixed value expressed in pixels.

div { min-width: 50px; }

In this CSS min-width example, the width of the <div> tag can not become smaller than 50px.

We can also express the min-width as a fixed value in em's.

For example:

div { min-width: 75em; }

In this CSS min-width example, the width of the <div> tag can not become smaller than 75em.

Let's look at a CSS min-width example where we have provided the min-width as a percentage.

div { min-width: 50% }

In this CSS min-width example, the width of the <div> can not become smaller than 50%.