max-width changes its value automatically

Question

I have a question about max-width and why does it change itself Dependeds on display width.

here is my code:

div {
  height: 100px;
  max-width: 500px;
  background-color: powderblue;
}

So the max-width is 500px but when I resize my display size, max-width value changes.

In the image below I have a result size with 150px width: enter image description here

as you can see my division width is actually 150px, not 500px which was my max-width value.

So why does max-width automatically changed its value? Is it correct to say if the display width is smaller than max-width, then it matches the width of screen?

Cheers

Answer 1

with max-width, you tell the browser what is max-width of the element. if the max-width of the element is bigger than 500px it will make the height of the element bigger.

with max-width, you set the maximum width and therefore it can be smaller but not bigger than 500px