Min and max width and height
min-width, max-width, min-height, and max-height constrain how small or large an element may become. They help responsive layouts stay usable across a wide range of sizes.
Overview
min-width, max-width, min-height, and max-height constrain how small or large an element may become. They help responsive layouts stay usable across a wide range of sizes.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1.3 | 18 | 1 | |
none | 18 | 12 | 1 | 1.3 | 18 | 1 |
| Other | ||||||
| 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 | ||||||
| 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 | ||||||
| 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 |
- CSS 2.1 leaves the behavior of `max-height` with `table` undefined. Firefox supports applying `max-height` to `table` elements.
- CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Firefox supports applying `max-width` to `table` elements.
- CSS 2.1 leaves the behavior of `min-height` with `table` undefined. Firefox supports applying `min-height` to `table` elements.
- This feature was removed in a later browser version (22)
- Firefox 18 and later used `auto` as the initial value for `min-height`.
- CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.
- Chrome uses `auto` as the initial value for `min-width`.
- Edge uses `auto` as the initial value for `min-width`.
- 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`.
- Chrome Android uses `auto` as the initial value for `min-width`.
Syntax
img {
max-width: 100%;
height: auto;
}
.main {
min-height: 100vh;
}Live demo
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
Powered by web-features