How to keep grid item responsive square and grid container with fixed height?

<body class="bg-dark flex flex--dir-col">
  <nav class="text-dark flex center nav">
    <a class="btn add-start-point">Add Start Point</a>
    <a class="btn add-end-point">Add End Point</a>
    <select class="btn pathfinder">
      <option disabled selected value>Pathfinder Algo</option>
      <option value="bfs">bfs</option>
      <option value="dfs">dfs</option>
    </select>
    <select class="btn maze">
      <option disabled selected value>Maze Generate Algo</option>
      <option value="als-bor">Aldous-Border</option>
    </select>
    <a class="btn start-btn">Start</a>
    <a class="btn reset-btn">Reset</a>
  </nav>
  <div class="flex center container">
    <div class="board grid bg-white"></div>
  </div>
</body>

I’m trying to build a algorithm visualizer.
I want the grid container fill the rest view height and keep grid item square.
I’ve set body: height: 100vh, but when I set container height: 100% and set grid item aspect-ratio: 1 , grid container expand. How can I keep the fixed height of rest view height and make grid item responsive based on the change of view height?
now it look like this It should be a 25*25 board with height of rest view height.

body {
  line-height: 1.5;
  font-size: 62.5%;
  min-height: 100vh;
}

.container {
  flex: 1;
  margin-inline: auto;
  width: 100%;
  padding: 1rem;
  background-color: #eee;
  display: inline-block;
}

.board {
  margin-inline: auto;
  min-height: 100%;
}

.cell {
  aspect-ratio: 1/1;
  transition-duration: 1s;
  border: 1px solid black;
}