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.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
