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

The max-height<\/code> property in CSS<\/abbr> is used to set the maximum height<\/b> of a specified element. Authors may use any of the length values<\/a> as long as they are a positive value. max-height<\/code> overrides height, but min-height<\/code> always overrides max-height<\/code>.<\/p>\n\n\n\n

.wrapper {\n  height: 100%;     \/* full height of the content box *\/\n  max-height: 20em; \/* requires an absolute value for height. *\/\n}\n\n.wrapper {\n  height: 50px;\n  max-height: 20px; \/* Will be AT MOST 20px tall : overrides height *\/\n}\n\n.wrapper {\n  min-height: 400px; \/* overrides height and max-height *\/\n  height: 200px;\n  max-height: 300px;\n}<\/code><\/pre>\n\n\n\n
<\/code>Check out this Pen!<\/a><\/pre>\n\n\n\n
The percentage is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none. The max-height<\/code> property will apply to all elements except non-replaced inline elements<\/a>, table columns, and column groups<\/a> (i.e. colgroup<\/code>, col<\/code> ).<\/p>\n\n\n
Browser support<\/h3>\n\n\n
IE<\/th>Edge<\/th>Firefox<\/th>Chrome<\/th>Safari<\/th>Opera<\/th><\/tr><\/thead>
All<\/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