How does clamp() differ from setting width, max-width, & min-width?

Question

I recently realized that you can use the CSS function clamp() in combination with width to set a "max width" and "min width". I am wondering what the fundamental difference is when using width + clamp() over min-width, width, max-width.

In other words, how does this...

.item {
   width: 100%;
   max-width: 200px;
   min-width: 100px;
}

...differ from this...

.item {
   width: clamp(100px, 100%, 200px);
}

Tax

Answer 1

I am wondering what the fundamental difference is

They are completely different so it's wrong to assume they are the same. I can give you a lot of examples where they behave differently but here is only one that should be enough to demonstrate that they are not the same:

.item1 {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
}

.item2 {
  width: clamp(200px, 100%, 300px);
}

.container {
  display: flex;
  height:80px;
  margin:10px;
  width:150px;
  border: 2px solid;
}

.container>* {
  background: red;
}

<div class="container">
  <div class="item1"></div>
</div>
<div class="container">
  <div class="item2"></div>
</div>

In the above, using min-width will set a minimum boundary for the shrink effect (you get an overflow) while it's not the case when using clamp()

In most of the cases, you may not notice any difference but keep in my mind that they are indeed different.

Aeroneurosis

Maybe I'm wrong or missing something but setting display: block on .container (need also height:100% on items or you won't see them) the items will both correctly overflow, the containing is an effect from flexbox, clamp is setting correctly the min value requested if you look via devtools. So I guess the point is not really clamp per se but where/how it is applied right? – Oleta

@Oleta I doesn't really matter if it's flexbox or something else. I took the first example I had in mind to show that we don't get the same final result which mean both aren't the same. If both were the same (like assumed by the OP) then they should always produce the same result whatever the code configuration. Both can be used in most of the cases to get the same result but we cannot say they are exactly the same. – Aeroneurosis

Ok, it's evident that they're different, but why and how are they different? How does item2 end up with a width of 150 instead of 200? Why is clamp not doing its job? – Gader

Answer 2

The min-width, and max-width properties (and their friends for height) limit min and max to exact values, but with width of 100% will adjust to fit an area in-between them. Here, the width will be at most 200px, 100-200px if space is > 100px and < 200px, and at least 100px.

.item-static {
   width: 100%;
   max-width: 200px;
   min-width: 100px;
}

Using clamp, instead the width will adjust between min and max based on available space, and with a preferred value of 100% will adjust to the space if it's less than min or greater than max; this is because % values can be treated as auto.

.item-clamp {
   width: clamp(100px, 100%, 200px);
}

.item-static {
  width: 100%;
  min-width: 100px;
  max-width: 200px;
}

.item-clamp {
  width: clamp(100px, 100%, 200px);
}

.thin {
  width: 75px;
}

.skinny {
  width: 150px;
}

.wide {
  width: 250px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<div class="thin item-static red">100px</div>
<div class="skinny item-static blue">150px</div>
<div class="wide item-static green">200px</div>

<hr>

<div class="thin item-clamp red">75px</div>
<div class="skinny item-clamp blue">150px</div>
<div class="wide item-clamp green">250px</div>

Suspire