我正在使用 Mapboxgl 和 React 在我的网页上显示地图，但在设置 mapbox 的大小时遇到​​了很大的麻烦。我编写了自己的 css 类来至少显示地图，否则由于某种原因，它显示的高度为 0。我的 自定义 css 类如下所示

.custom-map {
  display: flex;
  width: 100%;
  height: 54em;
}

我还在我的项目中本地加载了 mapboxgl css 文件，完整文件加载到页面上。我当前的源代码可以在 这里 找到，我尝试了很多样式，我在这里设置了样式

 <div
        ref={el => (this.mapContainer = el)}
        className="mapboxgl-map absolute custom-map top right left bottom"
 />

目前 mapbox 容器看起来像这样，请注意，从 mapbox 弹出的信息会一直到达我想要的位置，但地图却不会。

mapbox css 文件将地图的高度设置为 %，但 % 高度由于某种原因不起作用，我必须使用 em 设置高度。禁用自定义地图并从 mapbox css 文件中以 em 为单位设置高度后，我得到的实际高度大于 100%。即使使用 em，更改 .mapboxgl-map 中的 width 属性也不起作用。

我不确定错误在哪里，因此很难发布解决此问题可能需要的所有相关信息，我很乐意发布所需的任何其他信息。提前感谢您的回复！