body {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background-color: #18191c;
  font-family: 'Roboto', sans-serif;  
  font-size: 20px;
  color: #ffffff;
}

.container > div {
  margin-bottom: 20px;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 10px;
  color: #ffffff;
  height: 70px;
}
.cssMin {
  background-color: #9719CA;
  width: min(50vw, 700px);   
} 

.cssMax {
  background-color: #7FDA93;
  width: max(50vw, 700px); 
}

.cssClamp {
  background-color: #5133DF;
  width: clamp(500px, 50vw, 700px);
}

.viewport {
  background-color: #6B7FF7;
  height: 40px;
  padding: 10px;
  line-height: 40px;
  text-align: center;
}

const viewport = document.querySelector('.viewport');
const cssMin = document.querySelector('.cssMin');
const cssMax = document.querySelector('.cssMax');
const cssClamp = document.querySelector('.cssClamp');

const calcWidth = () => {
  viewport.textContent = `Viewport: ${window.innerWidth}px`;
  cssMin.textContent = `CSS Min Width: ${cssMin.offsetWidth}px`;
  cssMax.textContent = `CSS Max Width: ${cssMax.offsetWidth}px`;
  cssClamp.textContent = `CSS Clamp Width: ${cssClamp.offsetWidth}px`;
}
calcWidth();

window.addEventListener('resize', calcWidth);