<div class="min"></div>
.min {
  width: min(350px, 50%);
  background: gold;
}

/* 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 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: gold; 
}

DIV + DIV {
  margin-top: 1rem;
}
const elements = document.querySelectorAll('DIV');

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

showWidth();

window.addEventListener('resize', showWidth);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.