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

max-width

Last updated on:

The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width 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%;
  max-width: 20em; /* Will be AT MOST 20em wide */
}

.wrapper {
  min-width: 50em; /* Overrides max-width */
  width: 100%;
  max-width: 20em; /* Will be AT MOST 20em wide */
}
Check out this Pen!

Be mindful when assuming max-width is inherited as this property does not inherit from other parent elements. If a width of 300px has been defined with a max-width of 600px, the initial width value will always override the max-width value of 600px.

Related Properties

Other Resources

Browser Support

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

Comments

  1. Is there a way to make max-width equal parents width – i.e. the child will never make its parent wider?

    Thanks

  2. Sile
    Permalink to comment#

    Hello,is this property only compatible on IE 8 or higher?
    I have checked at caniuse.com and it tells the property works on ie7, too. (In fact I am checking a website on ie7, and looks fine using the max/min.width property.. but i would like to be sure about it..)
    Thanks and regards

  3. Dave Olsen
    Permalink to comment#

    img{
    max-width: 100%;
    }
    breaks inside css columns. It appears to reference the total width of the element before columns are applied. I would rather have max-width reference the width of the column.

    Anyone know any work-arounds? Or, did I just miss something?

    Thanks!

  4. I have three

    <

    div> here is the code.

    I want to place left_nav with width:100px on float:left side,
    center_nav in center with min-width:200px and max:100%.
    the 3rd div with width:300px with float:right side.

    height for all is 100%.

    the problem is my center_nav under-hide on right_nav.
    what code i need to place that center_nav remain between right_nav & left_nav?

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>
```