How width and max-width work

Last updated Jul 29, 2016

For most Front-end developers on the web implementing layout designs; setting the width property is a frequent part of the task. Understanding the property saves a lot of time during development and improves code quality.

Recently Chris Coiyer of CSS-Tricks published a post titled A Tale of `width` and `max-width`.

In the article he demonstrates how the width and max-width CSS properties work with the subject of a modal module, although the technique can be applied on other elements.

Chris Coiyer: You might want to limit the width of a modal, right? Kinda gives it that “modal” look on larger screens. Let’s say 600px sounds right. But, you want to make sure it doesn’t bust outside of its parent element. For example, avoid causing horizontal scrolling on a mobile screen.

How would you do that?

[element] {
  width: 600px;
  max-width: 100%;
}

[element] {
  width: 100%;
  max-width: 600px;
}

The answer: it doesn’t really matter, they are the same thing.

He demonstrates it with this reduced test case

Read the full article here