An interesting conversation came up in the comment thread of one of our posts last week, Considerations for Styling a Modal.
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?
width: 600px; max-width: 100%;
width: 100%; max-width: 600px;
The answer: it doesn’t really matter, they are the same thing.
Some people’s reactions:
- The second one is “more correct”
- Very big difference, actually
- The second one would be friendlier to a narrower parent width
- The first is garbage
- The second describes the behavior in a more logical way
I agree it’s kind of mind bending. They seem like they would be different. A reduced test case is always a good plan.
This might be a useful way to think about it: if the element would render wider than what
max-width says it can be,
- Parent is 1000px wide
- Width says element should be 600px wide. That doesn’t break the max-width rule, so 600px it is!
- Width says element should be 1000px wide. That breaks max-width rule, so forces element down to 600px.
- Parent is 320px wide
- Width says element should be 600px wide. That breaks the max-width rule which says element can only be at most 320px wide, so 320px it is!
- Width says element should be 320px wide. That doesn’t break the max-width rule, so 320px it is!
Whether the parent element is wider or narrower, these different rulesets end up agreeing with each other. (Although there is a difference when they are flex items.)
I’d add a note: when the same thing can be done in two different ways, document the standard way for your codebase and stick to it. Uniformity trumps flexibility in these situations and reduces bugs later on.
That’s something I do every day, but never even noticed. I guess I think of ‘max-width’ as a caveat. Be width:90% but not bigger than 1200px (max-width).
I’ve always used max-width: 700px; width: 100%; because it’s seems to be more intuitive, then I’ve discovered why so images on Firefox behave so strange and it seems that Firefox renders correctly images only with max-width: 100%; and ex. width: 700px;
So it seems to make a difference.
And as I said the first way seems to be more intuitive. Anyway it’s nice that max-width: 100%; works, so on old websites where you have a lot of fixed widths, you can tempt to apply a global max-width: 100% rule to make it responsive ;)
I feel like the last sentence of this article really ought to be stressed more. This is an interesting thing to think about sure, but it’s bad advice to say they are interchangeable.
This is a nice post. Thanks!
I tend to think “mobile first”, so for me it’s more intuitive to think of the width first on smaller resolutions and limit it for larger resolutions. So I would start with
width: 100%;and set
Nice one. thanks for clearing the air
As you wrote above it doesn’t really matter, but for me the second one feels more intuitive – “Keep width of element 100% with maximum of 600px”. Anyway thanks for writing this article.
I’m going to have to agree with most of the other commenters above – the 2nd point seems like the better way to write (as well as understand) your code!
As long as this is about elements with display: block the second scenario doesn’t necessarily need the width: 100%.
Write less code ;)
This is a great primer, thanks. If you’re interested in some really interesting width declaration interactions, check out Rémi Parmentier’s Fab Four technique for media-query-less responsive design: https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848 .
Usually confuse for this kinda stuff
Thx for the explanation and the vid sample, it will help a lot of nerds :)
Lev Boer notes a weirdness with textareas where swapping the values of max-width and width do not lead to the same outcome: