The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.

.wrapper {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
Check out this Pen!

Be mindful when assuming min-width 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 length, your min-width value of 100px will not be neccessary as you have already specified an absolute value for the width (i.e. 200px). The best way to use min-width is to define a width value as a percentage and use an absolute value for the min-width property otherwise using a percentage value for for both min-width and width will not produce the expected result.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
24+ 5.1+ 18+ 12.1+ 8+ 2.1+ 3.2+

IE7 doesn't support "inherit" as a value.


  1. User Avatar
    Permalink to comment#

    Is there some work around about one should be aware of for older browsers?

  2. User Avatar
    Permalink to comment#


    In this time where majority of users are on modern browsers I would not worry about this anymore.

    I come from the IE 5 & 6 days where you had this make sure you plan this through but not anymore.

    @Chris, I am surprised that you dont have the default value here set as an easy reference.

  3. User Avatar
    Bisnis Online
    Permalink to comment#

    what example to set min-width css?

  4. User Avatar
    Ed Harley
    Permalink to comment#

    Thank you very much, could not find my answer anywhere to why my min-width wasnt working. It was because i was using a percentage for both width and min-width but found my mistake. Thank you :)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.