Adjusting font size according to element width

Question

I have a responsive grid (4x4) that is ultimately going to take a variety of user inputs. These could range from one three-letter word to entire sentences.

I am trying to find a way to get the font-size on individual grid elements to adjust according to the width of the element itself, and for this to be responsive to different-sized windows.

For clarity, I do not want all 16 elements in my grid to change font-size - only the overflowing/wrapping elements, so a container-query or generic media query won't work here.

Ideally I would allow the text to wrap once (two-lines) and beyond that to decrease in size.

I am trying to do this with vanilla Javascript and CSS.

Here is what I have tried so far, and here is a link to a CodePen if useful: CodePen Link

HTML:

<div class="grid-container">
    <div class="box on group1"></div>
    <div class="box on group1"></div>
    <div class="box on group1"></div>
    <div class="box on group1"></div>
    <div class="box on group2"></div>
    <div class="box on group2"></div>
    <div class="box on group2"></div>
    <div class="box on group2"></div>
    <div class="box on group3"></div>
    <div class="box on group3"></div>
    <div class="box on group3"></div>
    <div class="box on group3"></div>
    <div class="box on group4"></div>
    <div class="box on group4"></div>
    <div class="box on group4"></div>
    <div class="box on group4"></div>
  </div>

CSS:

.grid-container{
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 200px));
  height: 50vh;
  max-width: 830px;
  gap: 10px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  /* word-break: break-all;
  word-wrap: break-word; */
  white-space: nowrap;
  padding: 1rem;
}

Javascript:

const boxes = document.querySelectorAll('.box');
const defaultMaxFontSize = 24;

adjustTextSize();

function adjustTextSize() {
  boxes.forEach((box) => {
    let fontSize = defaultMaxFontSize;
    const minFontSize = 5;

    while (box.scrollWidth > box.offsetWidth && fontSize > minFontSize) {
      fontSize -= 1;
      box.style.fontSize = `${fontSize}px`;
    }

    while (box.scrollWidth < box.offsetWidth && fontSize < defaultMaxFontSize) {
      fontSize += 1;
      box.style.fontSize = `${fontSize}px`;
    }
  });
}

window.addEventListener('resize', () => {
  adjustTextSize();
  boxes.forEach((box) => {
    adjustTextSize(box);
  });
});

Currently this fits any longer text into the box on one line, but doesn't adjust font-size according to available space as I'd like it to.

Any help much obliged!