Grow your CSS skills. Land your dream job.


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+


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


  2. Sile
    Permalink to comment#

    Hello,is this property only compatible on IE 8 or higher?
    I have checked at 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#

    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?


  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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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