Is max-width:auto == max-width:100%?

css, html

Solution

They are not equal. `auto` is not a valid value for `max-width`.

If you're looking for a value that means "there is no upper bound for the width of this element", that value is `none` (see the spec on `max-width`).

`none` is not equal to 100% either, however. The value 100% means that an element can only be as wide as the constraints of its containing block at most (see the spec on the `width` property for details on percentage widths).

With `none`, you could still cause the element to be wider than its containing block (which would typically result in overflow), e.g. by setting `width: 150%` on the element. With a max width of 100%, that limit would simply take precedence over the 150% setting.

Problem

Is ``` max-width:auto; ``` equal to ``` max-width: 100%? ``` And if not, what's the difference?

Original source