<div class="minMaxClamp">
<div class="cssMin">CSS Min</div>
<div class="cssMax">CSS Max</div>
<div class="cssClamp">CSS Clamp</div>
</div>
.minMaxClamp > div {
margin-bottom: 20px;
border: 1px solid #000000;
border-radius: 5px;
padding: 10px;
}
.cssMin {
background-color: #b0a7e3;
width: min(30vw, 700px);
height: 100px;
}
.cssMax {
background-color: #eed590;
width: max(30vw, 700px);
height: 100px;
}
.cssClamp {
background-color: #e6adc7;
width: clamp(400px, 50vw, 600px);
height: 100px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.