Minimum & Maximum Sizes

CSS Minimum & Maximum Sizes

CSS minimum and maximum sizing properties place limits on how small or large an element can become. They are useful for creating flexible layouts that can adapt to available space while remaining within practical size limits.

Setting Size Limits

The min-width, max-width, min-height, and max-height properties place limits on an element's dimensions. Unlike a fixed width or height, these properties allow the element to remain flexible within the specified limits.

div {
  min-width: 200px;
  max-width: 600px;
  min-height: 100px;
  max-height: 400px;
}

These limits can help prevent an element from becoming too narrow, too wide, too short, or too tall.

The min-width Property

The min-width property sets the minimum width an element is allowed to use. If normal sizing would make the element narrower than this limit, the minimum width takes effect.

div {
  min-width: 250px;
}

This prevents the element from becoming narrower than 250 pixels, even when another width value would otherwise make it smaller.

The max-width Property

The max-width property sets the maximum width an element is allowed to use. The element can be narrower than this value, but it will not normally become wider than the specified maximum.

div {
  max-width: 600px;
}

This is useful when an element should adapt to smaller available spaces without growing indefinitely on wider screens.

The min-height Property

The min-height property sets a minimum height while still allowing an element to grow when its content requires more space.

div {
  min-height: 150px;
}

The element will be at least 150 pixels high, but it can become taller when necessary to accommodate additional content.

The max-height Property

The max-height property limits how tall an element can become.

div {
  max-height: 200px;
}

If the content requires more space than the maximum height allows, it may overflow the element. The overflow property can be used to control what happens to that extra content.

Combining Width with Minimum and Maximum Sizes

A flexible width can be combined with min-width and max-width to keep an element within a desired range.

div {
  width: 80%;
  min-width: 250px;
  max-width: 800px;
}

The element attempts to use 80% of the available width, but the minimum and maximum values limit how narrow or wide it can become.

Combining Height with Minimum and Maximum Sizes

The same idea applies vertically. A height can be limited with min-height and max-height.

div {
  min-height: 100px;
  max-height: 300px;
}

The element can grow between these limits as its content and layout require. If its content needs more space than the maximum height permits, overflow may occur.

Maximum Width and Responsive Content

A common pattern is to combine width: 100%; with max-width. This allows an element to shrink when less space is available while preventing it from becoming wider than a chosen limit.

div {
  width: 100%;
  max-width: 700px;
}

This technique is useful for flexible page content, images, forms, and other elements that should adapt to smaller screens.

Size Limits and Box Sizing

The box-sizing property affects how minimum and maximum dimensions relate to padding and borders, just as it does with width and height.

div {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  border: 5px solid #333333;
}

With border-box, the padding and borders are included within the element's specified sizing limits. With content-box, they are added outside the content dimensions.

Try Minimum and Maximum Sizes

Edit the width, minimum width, maximum width, and minimum height values in the example. Resize the preview to see how the element changes size while remaining within its limits.

Size Limits and Overflow

Maximum size limits can create situations where content needs more space than the element is allowed to use. This is especially common when max-height restricts an element containing a large amount of content.

div {
  max-height: 150px;
}

By default, overflowing content may remain visible outside the box. CSS provides the overflow property to control whether extra content remains visible, is clipped, or can be accessed by scrolling.

The next tutorial examines overflow in more detail.

Summary

The CSS min-width, max-width, min-height, and max-height properties place limits on element dimensions. They can be combined with flexible width and height values to create elements that adapt to available space without becoming too small or too large.

The next tutorial covers Overflow and explains how CSS handles content that does not fit within an element's available space.