max-width

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. User Avatar
    Turkey Excursions
    Permalink to comment#

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

    Thanks

  2. User Avatar
    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. User Avatar
    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. User Avatar
    Abid Riaz
    Permalink to comment#

    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?

  5. User Avatar
    kit8
    Permalink to comment#

    Max-Width only working for Internet Explorer with a strict doctype : https://msdn.microsoft.com/en-us/library/ie/ms530811%28v=vs.85%29.aspx

  6. User Avatar
    Fred
    Permalink to comment#

    I’m having an issue where my percentage widths are being based on the element’s own max-width, and not on the parent’s width. Cannot figure it out. Example: I have a #parent with a width (and max-width) of 1600px. I have a #child with a max-width of 1800px and a width of 80%. #Child is being rendered with an actual width of 1440, not 1280.

Submit 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.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag