You can dynamically calculate and set both row height and font size so that everything fits within the .container. You already did the row height, you can also handle font scaling. – tepalia

Scaling the font-size down together with the row height is actually what I need. I didn't even consider the font-size is holding up the row height from changing.

function updateRowHeights() {
      const rows = tbody.querySelectorAll('tr');
      const totalHeight = container.clientHeight;
      const rowHeight = totalHeight / rows.length;
      const fontScale = 0.5; // 50% of row height

      rows.forEach(row => {
        row.style.height   = rowHeight + 'px';
        row.style.fontSize = (rowHeight * fontScale) + 'px';
      });
    }