Using CSS math functions

property: calc(expression);

<div class="calc1">
  <code>width: calc(10px + 100px);</code>
</div>
<div class="calc2">
  <code>width: calc(2em * 5);</code>
</div>
<div class="calc3">
  <code>width: calc(100% - 32px);</code>
</div>
<div class="calc4">
  <code>width: calc(var(--predefined-width) - calc(16px * 2));</code>
</div>

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: red;
  color: white;
  height: 48px;
}

.calc1 > code {
  /*  width: `110px` */
  width: calc(10px + 100px);
}

.calc2 > code {
  /*  width: `10em` */
  width: calc(2em * 5);
}

.calc3 > code {
  /*  width:    . */
  width: calc(100% - 32px);
}

.calc4 > code {
  --predefined-width: 100%;
  /*  width:    . */
  width: calc(var(--predefined-width) - calc(16px * 2));
}

property: min(<first value>, <second value>, <third value>, ...);

<div class="min1">
  <code>width: min(9999px, 50%);</code>
</div>
<div class="min2">
  <code>width: min(9999px, 100%);</code>
</div>
<div class="min3">
  <code>width: min(120px, 150px, 90%);</code>
</div>
<div class="min4">
  <code>width: min(80px, 90%);</code>
</div>

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: darkblue;
  color: white;
  height: 48px;
}

.min1 > code {
  /*  width:    . */
  /*     `50%`   . */
  width: min(9999px, 50%);
}

.min2 > code {
  /*  width:    . */
  /*     `100%`   . */
  width: min(9999px, 100%);
}

.min3 > code {
  /*  width:    . */
  /*     `120px`   . */
  width: min(120px, 150px, 90%);
}

.min4 > code {
  /* Output width:    . */
  /*     `80px`   . */
  width: min(80px, 90%);
}

property: max(<first value>, <second value>, <third value>, ...);

<div class="max1">
  <code>width: max(50px, 50%);</code>
</div>
<div class="max2">
  <code>width: max(50px, 100%);</code>
</div>
<div class="max3">
  <code>width: max(20px, 50px, 90%);</code>
</div>
<div class="max4">
  <code>width: max(80px, 80%);</code>
</div>

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkmagenta;
  color: white;
  height: 48px;
}

.max1 > code {
  /*  width:    . */
  /*     `50%`   . */
  width: max(50px, 50%);
}

.max2 > code {
  /*  width:    . */
  /*     `100%`   . */
  width: max(50px, 100%);
}

.max3 > code {
  /*  width:    . */
  /*     `90%`   . */
  width: max(20px, 50px, 90%);
}

.max4 > code {
  /*  width:    . */
  /*     `80%`   . */
  width: max(80px, 80%);
}

property: clamp(<minimum value>, <value to be clamped>, <maximum value>);

<div class="clamp1">
  <code>width: clamp(10%, 1px, 90%);</code>
</div>
<div class="clamp2">
  <code>width: clamp(10%, 9999px, 90%);</code>
</div>
<div class="clamp3">
  <code>width: clamp(125px, 1px, 250px);</code>
</div>
<div class="clamp4">
  <code>width: clamp(25px, 9999px, 150px);</code>
</div>

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkgreen;
  color: white;
  height: 48px;
}

.clamp1 > code {
  /*  width:    . */
  /*     `20%`   . */
  width: clamp(20%, 1px, 80%);
}

.clamp2 > code {
  /*  width:    . */
  /*     `90%`   . */
  width: clamp(10%, 9999px, 90%);
}

.clamp3 > code {
  /* Output width: `125px` */
  width: clamp(125px, 1px, 250px);
}

.clamp4 > code {
  /* Output width: `150px` */
  width: clamp(25px, 9999px, 150px);
}