CSS Minimum & Maximum Sizes

CSS minimum and maximum sizing properties place limits on how small or large an element can become while still allowing its dimensions to remain flexible.

The min-width, max-width, min-height, and max-height properties are useful when an element needs to adapt to available space without 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 have.

.box {
  min-width: 250px;
}

The element can become wider than 250px, but its used width will not normally become smaller than that minimum.

This can help protect content or interface elements that become difficult to use when they are compressed too far.

The max-width Property

The max-width property sets the maximum width an element is allowed to have.

.box {
  max-width: 800px;
}

The element can become narrower when less space is available, but its used width will not normally grow beyond 800px.

This is especially useful for layouts that should remain flexible on smaller screens without becoming excessively wide on larger screens.

The min-height Property

The min-height property establishes a minimum height for an element.

.box {
  min-height: 150px;
}

The box will be at least 150px high, but it can grow taller when its content requires more space.

This makes min-height useful when you want a minimum visual size without forcing all content into a fixed height.

The max-height Property

The max-height property establishes a maximum height for an element.

.box {
  max-height: 300px;
}

If the content requires more vertical space than the maximum height allows, the content can overflow the box unless overflow behavior is controlled.

.box {
  max-height: 300px;
  overflow: auto;
}

In this example, scrollbars can be provided when they are needed. The overflow property is covered on the next tutorial page.

Combining width with Minimum and Maximum Sizes

Minimum and maximum properties can be combined with width or height to place limits on flexible sizing.

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

The preferred width is 80% of the available space, but min-width prevents the box from becoming narrower than 250px, while max-width prevents it from becoming wider than 800px.

This combination allows the element to respond to available space while remaining within defined limits.

Responsive Widths

A common responsive pattern combines width: 100% with a maximum width.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

The container can use the available width on smaller screens, but it stops growing when it reaches 1200px. The automatic left and right margins can center it when additional horizontal space is available.

The same idea can be used for images, forms, articles, cards, and many other page components.

Maximum Height and Overflow

Maximum height is often used when content should be limited to a particular vertical area.

.content {
  max-height: 200px;
  overflow: auto;
}

If the content fits within 200px, no scrolling is needed. If it requires more space, overflow: auto allows the browser to provide scrolling when necessary.

Using a maximum height instead of a fixed height can provide more flexibility because shorter content does not have to fill the entire maximum size.

Minimum and Maximum Sizes with box-sizing

The box-sizing property affects how minimum and maximum dimensions relate to an element's content, padding, and border.

.box {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  border: 3px solid steelblue;
}

With border-box, the padding and border are included within the specified width and maximum width. This can make responsive sizing easier to manage.

With the default content-box, padding and borders are added outside the dimensions applied to the content box.

Minimum and Maximum Size Example

The following example creates a flexible box with a preferred width of 80%, a minimum width of 200px, and a maximum width of 600px.

.box {
  width: 80%;
  min-width: 200px;
  max-width: 600px;
}

Open the example in the editor and change the min-width, max-width, or width values. You can also change the width of the editor's result pane to see when the minimum and maximum limits affect the box.

Play in Editor