CSS Min/Max Width/Height: Browser Support, Syntax

What is CSS min/max width and height?

CSS min-width, max-width, min-height, and max-height are sizing properties from the W3C CSS 2.1 specification. They set lower and upper bounds on the used width and height of a box. The minimum bounds win over width and height; the maximum bounds cap them.

Which browsers does CSS min/max width and height support?

CSS min/max width and height has near-universal browser support. Every shipping desktop and mobile browser supports the four properties by default, and global usage on caniuse sits at around 97 percent.

What values do CSS min/max width and height accept?

All four properties accept the same value types. The initial value is auto for min-width and min-height, and none for max-width and max-height.

• length: Absolute or relative units such as px, em, rem, vw, and vh. Example: min-width: 320px or max-width: 60em. Length values are the most common choice for fixed and fluid layouts.
• percentage: Resolves against the width or height of the containing block. Example: max-width: 100% on an image keeps it inside its parent; min-height: 50% on a section needs the parent to have an explicit height.
• auto: The initial value of min-width and min-height. On a normal block element auto resolves to 0. On a flex item or grid item auto resolves to the content size, which is why a long word can stop a flex item from shrinking.
• none: The initial value of max-width and max-height. none means there is no upper bound. Setting max-width: none on an element overrides any inherited cap from a wrapper or framework class.
• min-content: Sizes the box to its smallest content size, the longest unbreakable token. Useful on a button or pill that should never wrap mid-word.
• max-content: Sizes the box to its preferred content size, as if it were on an infinite line. Useful on a heading that should grow to its full text length without wrapping.
• fit-content: Behaves like max-content when there is room and like the available size when there is not. fit-content(20em) caps the size at the argument, which is the modern replacement for many max-width tricks.
• stretch: Sizes the box to fill the containing block in the matching axis. stretch is the new name for the older -webkit-fill-available value, and it ships in Chrome 124+, Firefox 132+, and Safari 18.4+.

What is the difference between min-width and max-width in CSS?

min-width sets the smallest size an element can shrink to. max-width sets the largest size it can grow to. The two properties bound the used width from below and from above, and the same logic applies to min-height and max-height on the block axis.

• Direction of the bound: min-width raises the used width up to its value when the computed width is smaller. max-width drops the used width down to its value when the computed width is larger. Together they clamp the box inside a range.
• Conflict resolution: If min-width is larger than max-width, min-width wins. The CSS Box Model spec gives the minimum bound the highest priority, which means a stray min-width: 600px on an element capped at max-width: 400px stretches the element to 600px.
• Override of width: min-width and max-width both override the width property. width: 200px on an element with min-width: 320px renders at 320px; width: 100% on an element with max-width: 1200px stops growing at 1200px.
• Initial value: min-width defaults to auto, which resolves to 0 on a block element. max-width defaults to none, which means no cap. That asymmetry is why max-width: 100% on an img is the standard responsive image trick: nothing else is competing with it.
• Use in media queries: min-width and max-width also work inside @media rules to target viewport widths. @media (min-width: 768px) targets viewports 768px and wider; @media (max-width: 767px) targets viewports up to 767px. The property names match but the meaning is viewport-relative, not box-relative.

What are the known issues with CSS min/max width and height?

The four properties ship in every modern browser, but the way they interact with flex, grid, percentages, and legacy engines still trips up production layouts.

• Flex items inherit min-width: auto: Flex items have a default min-width: auto on the main axis, which prevents them from shrinking below their content size. A long unbreakable word or a wide image keeps the item from collapsing. Set min-width: 0 on the flex item to opt out, then your flex-shrink rule starts working as expected.
• Percentage min-height needs a parent height: A percentage min-height resolves against the height of the containing block. If the parent has no explicit height, the percentage falls back to auto and looks ignored. Set html, body { height: 100%; } before applying min-height: 100% on the body, otherwise the page never reaches the viewport bottom.
• Sticky footer with min-height: 100vh on iOS Safari: min-height: 100vh on the body stretches past the visible area on iOS Safari because the address bar collapses on scroll. The fix is to use min-height: 100dvh, which uses the dynamic viewport unit and matches the visible area; iOS Safari 15.4+, Chrome 108+, and Firefox 101+ ship it.
• Grid items inherit min-width: auto too: A grid item with grid-template-columns: 1fr never shrinks below its content size for the same reason a flex item does not. Override with min-width: 0 on the grid item, otherwise a long word forces the entire row to overflow.
• min-width and max-width on tables: The min-width and max-width properties do not apply to table rows or table row groups. The CSS spec excludes them from the list of elements the four properties accept. Apply the bounds to the table element or to a wrapping div instead.
• Internet Explorer 5.5 and 6 ignore the properties: Legacy IE 5.5 and 6 do not support any of the four properties by default. Pages that still need to render on those versions used a CSS expression like width: expression(document.body.clientWidth > 1200 ? "1200px" : "auto") or a JavaScript polyfill. IE 7 onward supports the properties natively.

In my experience, the failure that bites teams the most is the missing min-width: 0 on flex children, where a card with overflow: hidden and a long heading still pushes the entire flex row out past the viewport because the heading lives inside an item that silently keeps its content-size minimum. Adding min-width: 0 to the flex item, not to the card, is the fix.

Citations

All CSS min/max width and height version numbers and platform notes in this guide come from these primary sources:

• W3C CSS 2.1 Visual Formatting Model Details: w3.org/TR/CSS21/visudet.html
• W3C CSS Box Sizing Module Level 4: w3.org/TR/css-sizing-4
• MDN min-width CSS property: developer.mozilla.org/en-US/docs/Web/CSS/min-width
• MDN max-width CSS property: developer.mozilla.org/en-US/docs/Web/CSS/max-width
• MDN min-height CSS property: developer.mozilla.org/en-US/docs/Web/CSS/min-height
• MDN max-height CSS property: developer.mozilla.org/en-US/docs/Web/CSS/max-height
• MDN CSS Flexible Box Layout, min-size auto: developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
• MDN dynamic viewport units: developer.mozilla.org/en-US/docs/Web/CSS/length
• WebKit feature status, intrinsic sizing keywords: webkit.org/blog/8929/release-notes-for-safari-technology-preview-72
• Chrome Platform Status, intrinsic sizing on min/max: chromestatus.com/feature/5102536062894080
• Mozilla Firefox 66 release notes: mozilla.org/en-US/firefox/66.0/releasenotes
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support