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

.min {
  width: min(350px, 50%);
  background: gold;
}

.max-width {
  width: 50%;
  max-width: 350px;
  background: yellowgreen;
}

/* 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);