<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.