max-width

Avatar of Sara Cope
Sara Cope on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

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.

Browser support

IEEdgeFirefoxChromeSafariOpera
7+AllAllAllAllAll
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAllAll
Source: caniuse