{"id":14077,"date":"2011-09-05T20:52:16","date_gmt":"2011-09-06T03:52:16","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14077"},"modified":"2021-01-15T10:31:36","modified_gmt":"2021-01-15T18:31:36","slug":"max-width","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-width\/","title":{"rendered":"max-width"},"content":{"rendered":"\n

The max-width<\/code> property in CSS<\/abbr> is used to set the maximum width<\/b> of a specified element. The max-width<\/code> property overrides the width<\/code> property, but min-width<\/code> will always override max-width<\/code> whether followed before or after width<\/code> in your declaration. Authors may use any of the length values<\/a> as long as they are a positive value.<\/p>\n\n\n\n

.wrapper {\n  width: 100%;\n  max-width: 20em; \/* Will be AT MOST 20em wide *\/\n}\n\n.wrapper {\n  min-width: 50em; \/* Overrides max-width *\/\n  width: 100%;\n  max-width: 20em; \/* Will be AT MOST 20em wide *\/\n}<\/code><\/pre>\n\n\n\n
<\/code>Check out this Pen!<\/a><\/pre>\n\n\n\n
Be mindful when assuming max-width<\/code> is inherited as this property does not inherit from other parent elements. If a width<\/code> of 300px has been defined with a max-width<\/code> of 600px, the initial width<\/code> value will always override the max-width<\/code> value of 600px.<\/p>\n\n\n
Browser support<\/h3>\n\n\n
IE<\/th>Edge<\/th>Firefox<\/th>Chrome<\/th>Safari<\/th>Opera<\/th><\/tr><\/thead>
7+<\/td>All<\/td>All<\/td>All<\/td>All<\/td>All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Android Chrome<\/th>Android Firefox<\/th>Android Browser<\/th>iOS Safari<\/th>Opera Mobile<\/th><\/tr><\/thead>
All<\/td>All<\/td>All<\/td>All<\/td>All<\/td><\/tr><\/tbody><\/table>
Source: caniuse<\/a><\/figcaption><\/figure>\n\n\n