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