<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 80px;
width: min(50%, 300px);
}
#div2 {
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>In this example, the width will be at most 300px, but will be smaller (use 50%) if the viewport width is smaller than 600px wide.</p>
<p>Resize the browser window to see the effect.</p>
<div id="div1">Use min() to set the width of this div to whichever value is smallest, 50% or 300px.</div>
<br>
<div id="div2">This div has a fixed width of 300px.</div>
</body>
</html>