CSS Min and Max values

With min and max properties, we can limit element sizes. This ensures that an element does not become too small or too large, even if the parent container size changes.

Available properties

The min-width, max-width, min-height, and max-height settings provide fine-tuning for layouts. They are often used in creating responsive design.

Property	Description
min-width	Sets the minimum width that the element cannot go below.
max-width	Sets the maximum width that the element cannot grow beyond.
min-height	Sets the minimum height that the element cannot go below.
max-height	Sets the maximum height that the element cannot grow beyond.

Example with fixed restrictions

In the following example, the box has both minimum and maximum width and height.

The red box can be between 200 and 400 pixels wide, and between 100 and 200 pixels tall.

Responsive usage

Min and max values combined with percentage widths are excellent for responsive layouts.

Tips for using min and max

Min and max properties help prevent extreme shrinking or stretching of elements.

Use min-width on mobile to prevent text from breaking into overly narrow columns.
Max-width helps keep content readable even on large screens.
Combine min and max values with percentage widths for the perfect responsive effect.