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

The min-width<\/code> property in CSS<\/abbr> is used to set the minimum width<\/b> of a specified element. The min-width<\/code> property always overrides the width<\/code> property 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  min-width: 20em; \/* Will be AT LEAST 20em wide *\/\n}<\/code><\/pre>\n\n\n\n
<\/code>Check out this Pen!<\/a><\/pre>\n\n\n\n
Be mindful when assuming min-width<\/code> is inherited as this property does not inherit from other parent elements. If authors define a width using an absolute value (px, pt, in, cm, mm), the min-width will not take affect as the width has been defined indefinitely. For example, if a value of 200px is used as a width<\/code> length, your min-width<\/code> value of 100px will not be neccessary as you have already specified an absolute value for the width<\/code> (i.e. 200px). The best way to use min-width<\/code> is to define a width<\/code> value as a percentage and use an absolute value for the min-width<\/code> property otherwise using a percentage value for for both min-width<\/code> and width<\/code> will not produce the expected result.<\/p>\n\n\n
Browser support<\/h3>\n\n\n
Chrome<\/th>Safari<\/th>Firefox<\/th>Opera<\/th>IE<\/th>Android<\/th>iOS<\/th><\/tr><\/thead>
24+<\/td>5.1+<\/td>18+<\/td>12.1+<\/td>8+<\/td>2.1+<\/td>3.2+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
Related properties<\/h3>\n\n\n    \t\t\n    
\n      
\n\n