Why doesn't width override max-width

Question

If I have the following code

<div></div>

div
{
    background: pink;
    height: 100px;
    max-width: 20px;
    width: 200px;    
}

The result is a div with width of 20px. (Even if I add !important to the width value)

FIDDLE

Why doesn't the width property override max-width here?

Answer 1

Because max-width has more priority than width. Its function is to prevent width of an element to increase from certain boundaries. If you want width to override max-width then remove max-width.

A good link to refer given in comments