如何保持网格项目响应方形和固定高度的网格容器？

Question

我正在尝试构建一个算法可视化工具。 我希望网格容器填充 rest 视图高度并保持网格项目正方形。 我设置了 body: height: 100vh ，但是当我设置容器height: 100%并设置网格项aspect-ratio: 1时，网格容器会展开。 如何保持 rest 视图高度的固定高度并根据视图高度的变化使网格项响应？ 现在它看起来像这样它应该是一个 25*25 的板，高度为 rest 视图高度。 我想要的看起来像这个，只是给网格项固定宽度，但我不想给网格项固定宽度。

 <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>

 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; }