Widely available A core responsive layout tool and often safer than fixed dimensions alone.

Min and max width and height

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

LayoutSizingConstraints

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
max-height
1
12
1
1.3
18
1
none
18
12
1
1.3
18
1
Other
css.properties.max-width

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
1
12
1
1
18
1
CSS property
none
1
12
1
1
18
1
Other
css.properties.min-height

The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
1
12
3
1.3
18
1
CSS property
auto
21
12
34
7
25
7
Other
css.properties.min-width

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
1
12
1
1
18
1
CSS property
auto
21
12
34
7
25
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • CSS 2.1 leaves the behavior of `max-height` with `table` undefined. Firefox supports applying `max-height` to `table` elements.
Notes 1 item(s)
Implementation note
  • CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Firefox supports applying `max-width` to `table` elements.
Notes 1 item(s)
Implementation note
  • CSS 2.1 leaves the behavior of `min-height` with `table` undefined. Firefox supports applying `min-height` to `table` elements.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (22)
Implementation note
  • Firefox 18 and later used `auto` as the initial value for `min-height`.
Notes 1 item(s)
Implementation note
  • CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.
Notes 1 item(s)
Implementation note
  • Chrome uses `auto` as the initial value for `min-width`.
Notes 1 item(s)
Implementation note
  • Edge uses `auto` as the initial value for `min-width`.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (22)
  • Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.
Notes 1 item(s)
Implementation note
  • Chrome Android uses `auto` as the initial value for `min-width`.

Syntax

CSS 
img {
  max-width: 100%;
  height: auto;
}
.main {
  min-height: 100vh;
}

Live demo

max-width: 100%

CSS Max-width: 100% demo.

PreviewFullscreen

min-height

CSS Min-height demo.

PreviewFullscreen

min/max setcombine

CSS min/max setcombine demo.

PreviewFullscreen

Use cases

  • Readable content widths

    Keep text blocks from stretching too wide while still allowing them to shrink on smaller screens.

  • Responsive component bounds

    Prevent media, sidebars, and panels from collapsing or expanding beyond useful limits.

Cautions

  • Max-height with hidden overflow can make content unreachable if the area needs scrolling or expansion.
  • Hard minimums can force horizontal scrolling on narrow screens.

Accessibility

  • Responsive constraints should still allow zoom, reflow, and localized text growth without truncating essential content.

Related links