min-width and max-width with the same value?

Question

In the past, I saw the next css and I was thinking if there is some actual difference between

min-width: 90px;
max-width: 90px;

and

width: 90px;

Answer 1

using width will simply specify fixed width over the element without paying attention to its content (so you can have overflow) :

div {
  width: 80px;
  border:2px solid red;
}

<div>
  <img src="https://lorempixel.com/200/100/" />
</div>

Using max-width means that the element will have an upper bound for its width. So its width can be from 0 to max-width depending on its content.

div {
  max-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
}

<div>
  <!-- this i a block element so max-width prevent it from taking 100% width -->
  <img src="https://lorempixel.com/200/100/" />
</div>
<div class="diff">
  <!-- this i an inline-block element so max-width has no effect in this case cause the content is taking less than 300px  -->
  <img src="https://lorempixel.com/200/100/" />
</div>
<div>
  <!-- You have overflow because the element cannot have more than 300 of width -->
  <img src="https://lorempixel.com/400/100/" />
</div>

And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style).

div {
  min-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
  min-height:50px;
}

<div>
  <img src="https://lorempixel.com/200/100/" />
</div>
<div class="diff">
  
</div>
<div class="diff">
  <img src="https://lorempixel.com/200/100/" />
</div>
<div>
  <img src="https://lorempixel.com/400/100/" />
</div>

---

So if you specify min-width and max-width, you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a width.

div {
  min-width: 300px;
  max-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
  min-height:50px;
}

<div>
  <img src="https://lorempixel.com/200/100/" />
</div>
<div class="diff">
  
</div>
<div class="diff">
  <img src="https://lorempixel.com/200/100/" />
</div>
<div>
  <img src="https://lorempixel.com/400/100/" />
</div>

Special Cases

In some particular cases, width will not give the same result as min-width/max-width like with Flexbox where we have the shrink feature that allow an element to shrink to fit its container

.box {
  width:200px;
  border:1px solid red;
  display:flex;
  margin:5px;
}
.box > div {
  border:2px solid;
  height:50px;
}

<div class="box">
  <div style="width:300px"></div>
</div>

<div class="box">
  <div style="min-width:300px;max-width:300px;"></div>
</div>

As you can see in the second case the element will not shrink because, unlike width, min-width will prevent this.

Another case is the use of resize property:

div {
  border: 2px solid;
  height: 50px;
  overflow: auto;
  resize: both;
}

<div style="width:300px"></div>

<div style="min-width:300px;max-width:300px;"></div>

As you can see, we can resize the element defined by width and not the one defined by min-width/max-width

---

We should also note that min-width/max-width is more powerful than width. Setting the 3 properties to different values will make min-width the winner

.box {
  border: 2px solid;
  height: 50px;
  width:100px;
  min-width:200px;
  max-width:150px;
}

<div class="box"></div>

This means that we can override a value set by width using min-width/max-width but not the opposite

Answer 2

It depends on the situation in which you're using it you'll see the same behaviour from both or not - tl;dr the answer is yes, there's a difference between those.

width:90px

First of all, the theory behind is that width:90px will initially set the width of an element to be 90px when browser loads the page. However, this could be modified by a user, optionally.

min-width:90px & max-width:90px

These properties define the upper (max) and lower (min) boundaries of the width of an element. These properties override width, but, width doesn't override these properties.

To show it practically, I'll change the dimensions from 90px to 100% as it is hard to visually explain the difference with such a small size.

I'll divide the explanation in 2 sections.

Elements are not designed to be resizable by user (only browser)

If elements are not designed to be resizable and the browser will do all the element resizing by itself, and the elements can be resized, then you'll see no difference between these two - see codepen snippets here max-width&min-width and onlyWidth.

Elements are designed to be resizable by user

If elements are designed to be resizable by the user, here is the difference between these 2 really show up.

width:100%;

When above is specified, browser will initialise the element to that width and then, user can still modify the width of the element with the resize option for that element.

min-width:100%;
max-width:100%;

However, when above is specified, the browser will initialise the element to the corresponding width, in this case 100% (in your original case, 90px) and these will be now constraints all the time, which makes the width of the element not being able to be resized, even though it is. See codepen snippet here showing the 2 of them at the same time so that you can see the difference

Hope this helps! :)