Menu
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?
469
max-width overrides width , but min-width overrides max-width .
The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%. Show activity on this post. Percentage values simply represent a percentage of the length of the element's container.
The max-width property in CSS is used to set the maximum width of a specified element. 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.
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
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
