Min/Max-Width


#1

Hi.

I’m a little confused by this statement I found in this article. The statement is: "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. "

In the code example, they have

.wrapper {
  min-width: 50em; /* Overrides max-width */
  width: 100%;
  max-width: 20em; /* Will be AT MOST 20em wide */
}

Is the article saying that min-width is always going to override max-width assuming that min-width is set to a larger value? It doesn’t appear to specifically say that, but otherwise what would be the purpose of using min-width and max-width together?

Thanks!
Phoenix


#2

I tested it a bit. min-width does override max-width if min-width is greater. So I think precedence goes: min-width beats max-width beats width

The only reason to use min-width and max-width would be to make sure an element stays within a certain range, such that min-width < width < max-width

There would never be a reason to to use a greater min-width than max-width. You could just make max-width equal to the min-width and achieve the same effect.


#3

That clears it up!

Thanks!