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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".