CSS max() function

index.html

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>
  
  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>
  
  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

script.js

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth > minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

style.css

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }
  
  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }
  
  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: max(45vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }
  
  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }
  
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }
  
  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }
  
  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  
  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }
  
  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }