Javascript 如何在网格元素中正确嵌入铯

我试图用CSS网格控制铯容器元素。但在Edge中，如果地球在网格内，它似乎会自动缩放过去。如果我使用Chrome甚至IE，这似乎不会发生。到底发生了什么，我应该如何应对？下面使用的基本代码。可用于将其插入：

CSS:

HTML:

编辑：起初我并没有注意到，但我已将溢出设置为隐藏。当使用铯元素时，去除显示边缘的元素似乎会永远增加元素的大小。我想这和

        grid-template-columns: repeat(auto-fill, [col] 100% ) ;

编辑2：我最终放弃了与铯相关的工作。我从未找到使用网格技术的解决方案。相反，我实现了flex组，它们似乎不会以相同的方式影响渲染。我确实保留了一份我的另一个框架的副本，希望我能偶然发现一个解决方案，如果我这样做了，我会发布一个正式的答案，除非有人比我强

<div class="wrapper">
  <div id="cesiumContainer" class="box a">A</div>
</div>
  <script src="https://cesiumjs.org/releases/1.55/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.55/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

var viewer = new Cesium.Viewer('cesiumContainer');

        grid-template-columns: repeat(auto-fill, [col] 100% ) ;