Treehouse: Grow your CSS skills. Land your dream job.

min-width

Last updated on:

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.

Comments

  1. Carl
    Permalink to comment#

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

  2. Alexander
    Permalink to comment#

    Carl,

    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. Bisnis Online
    Permalink to comment#

    what example to set min-width css?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```