如何让JS终端类应用的字符最大化适配屏幕并保持宽高比

我正在用JS开发一款类终端应用，为了能单独修改每个字符的颜色，采用大量仅包含单个字符的span标签来呈现内容。目前功能运行正常，但希望带有绿色边框的#game容器（即“字符屏幕”）能尽可能适配屏幕，并且在窗口缩放时保持固定的宽高比。

我尝试过修改容纳span的div尺寸，没有效果；之后又尝试调整span的字体大小，同样没能解决问题，或许存在更合适的实现方案。

更新：当前容器未做到适配屏幕，预期效果是容器填满可用空间的同时，保持字符排版的宽高比例。

代码实现 #

HTML #

<div id='game'></div>

CSS #

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  min-height: 100vh;
}

body {
  min-height: 100vh;
  box-shadow: 0px 0px 0px 10px red inset;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game {
  box-shadow: 0px 0px 0px 10px green inset;
}

span {
  font-family: Cascadia Code;
}

JavaScript #

document.addEventListener("DOMContentLoaded", draw);

function draw() {
  game = document.getElementById("game");
  for (y = 0; y <= 25; y++) {
    for (x = 0; x <= 100; x++) {
      cell = document.createElement("span");
      cell.innerText = "1";
      game.appendChild(cell);
    }
    game.appendChild(document.createElement("br"));
  }
}

内容的提问来源于stack exchange，提问作者Nire