Max-Width Property
Last updated: 2026-09-13
max-width Max-Width Property
The max-width property sets the maximum width of an element, preventing it from becoming too wide on large screens and hurting readability. Its default value, none, means there is no upper limit. It is a core tool for responsive design, often paired with width:100% so media elements adapt without exceeding their intrinsic size.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | non-replaced |
| Animation Type | length |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
max-width: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No maximum width. |
<length> | Type | A fixed maximum width. |
<percentage> | Type | A percentage relative to the containing block. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： max-width takes precedence over width; even if width is set larger, the actual width will not exceed max-width.
❓ FAQ
QWhat does max-width:100% do?
Amax-width:100% keeps an element from being wider than its parent, and combined with height:auto it scales images proportionally without overflowing, which is the standard way to make media responsive. Unlike width:100%, which forces the element to fill the container and blows up small images, max-width:100% only shrinks the image when the container is narrower than the image's intrinsic size; larger images display at full size.
QHow do I center content while limiting its maximum width?
ASet a max-width to cap the width and use margin:0 auto to center the element horizontally, which is the most common approach. For example, an article body with max-width:800px; margin:0 auto; shrinks automatically on narrow screens and stays centered at 800px on wide ones. For margin:auto to work, the element must be block-level and narrower than the available space. This keeps reading lines a comfortable length on desktop displays while staying fully fluid on smaller screens.
QIf both max-width and width are set, which one wins?
Amax-width wins. When width exceeds max-width, the element renders at max-width; when width is smaller, width applies. The overall priority is min-width, then max-width, then width, so max-width caps width from above and can never go below min-width. This clamping is what keeps overly large width values from breaking a layout, which is why content stays within a comfortable reading measure.
QCan max-width use a percentage?
AYes. max-width accepts lengths, percentages, and content keywords. A percentage is computed against the containing block's width, so for example max-width:80% means no wider than 80% of the parent container. It also supports keywords such as min-content, max-content, and fit-content, which derive the upper bound from the content itself and give responsive behavior without media queries. Percentages are particularly useful for bounding panels inside fluid parents.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
