max-width changes its value automatically-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Max-width determines maximum width which an element can have. It means your element can get every width less than your max-width. You should write min-width to specify minimum width that you expect.

Min-width:500px;

And write width for exact value.

CodePudding user response：

Max-width tells that the element cant exceed that point, min-width tells that the element cant be below the value, therefore use min-width if you want your element not to shrink or lower its width