<div class="min-max-width" data-text="min-width + max-width"></div>
<div class="clamp" data-text="clamp()"></div>

.min-max-width {
  width: 50%;
  min-width: 200px;
  max-width: 400px;
  background: orange;
}

.clamp {
  width: clamp(200px, 50%, 400px);
  background: turquoise;
}

/* Helpers*/
BODY {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font: 22px/1 Trebouchet MS, Arial, sans-serif;
}

DIV {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: gold; 
}

DIV::before {
  content: attr(data-text);
  position: absolute;
  top: .25rem;
  left: .25rem;
  font-size: 1rem;
}

DIV + DIV {
  margin-top: 1rem;
}

const elements = document.querySelectorAll('DIV');

const showWidth = () => {
  elements.forEach(element => {
    element.innerHTML = element.offsetWidth;
  })
}

showWidth();

window.addEventListener('resize', showWidth);