<div class="css-min">CSS Min() Example - If the viewport at 50vw is less than 700px, I take the value of 50vw, otherwise, I stay at 700px.</div>
<br />
<div class="css-max">CSS Max() Example - If the viewport at 50vw is greater than 700px, I take whatever 50vw's value is, otherwise, I stay at 700px.</div>
<br />
<div class="css-clamp">CSS Clamp() Example - If the preferred value of 60vw is smaller than 400px, the div will stop shrinking when it reaches that lower bound. Likewise if 60vw is larger than 600px, the div will stop growing when it reaches that upper bound.</div>
.css-min {
background-color: pink;
width: min(50vw, 700px);
height: 100px;
}
.css-max {
background-color: lightgreen;
width: max(50vw, 700px);
height: 100px;
}
.css-clamp {
background-color: lightblue;
width: clamp(400px, 60vw, 600px);
height: 100px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.