-1

max-width overrides width, but min-width overrides max-width. - MDN

The quote is from MDN documentation, but what they really mean? I don't see any difference if I place width, max-width and min-width in the example below in a different order, e.g. min-width first.

div {
  background: silver;

  /* 500 px if the width of the parent element is ≥ 1000 px,
     300 px if the width of the parent element is ≤  600 px,
     50% of the width of the parent element otherwise */
  width: 50%; max-width: 500px; min-width: 300px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
john c. j.
  • 725
  • 5
  • 28
  • 81
  • 1
    Change it to `width: 50%; max-width: 300px; min-width: 500px;` you will see what they mean – ruleboy21 Apr 29 '22 at 09:12
  • 1
    So this simply means that `max-width` should be larger than `width`, and `min-width` should be smaller than any of the two, right? – john c. j. Apr 29 '22 at 09:26

2 Answers2

1

max-width overrides width, but min-width overrides max-width.

This is rule which is used when mutually exclusive requirements are imposed, it might be written more explicitly as two rules

  • max-width is more important than width
  • min-width is more important than max-width

ramifactions of these are as follows

  • if you provide width greater than max-width element will not become wider than max-width
  • if you provide min-width greater than max-width element will become wider than max-width (to comply with min-width)
Daweo
  • 31,313
  • 3
  • 12
  • 25
0

The element's width is set to the value of min-width whenever min-width is larger than max-width or width.

They explained it at https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

Allenchew
  • 23
  • 1
  • 3