Mapbox 和 CSS Grid - Mapbox 不会在调整窗口大小时自动扩展

如何解决Mapbox 和 CSS Grid - Mapbox 不会在调整窗口大小时自动扩展

我的 mapBox 容器在调整窗口大小时无法自动调整大小，我遇到了问题。
在初始加载时，mapBox 容器会正确渲染到适用的容器大小，只是在调整窗口大小时不会。

结构相当简单：我创建了一个带有 2 个子 div（地图和列表）的网格容器。

.container {
  display: grid;
  grid-template-areas: "map map list";
  height: 100vh;
  grid-template-columns: 1fr 1fr 500px;
}

.map {
  grid-area: map;
  background-color: red;
}

.list {
  grid-area: list;
  background-color: yellow;
}

React / Nextjs 页面：

import * as React from "react";
import { useState } from "react";
import ReactMapGL from "react-map-gl";
import styles from "../styles/Home.module.css";

const MAPBox_TOKEN =
  "YOUR OWN TOKEN";

export default function Index() {
  const [viewport,setViewport] = useState({
    width: "100%",height: "100%",latitude: 37.7577,longitude: -122.4376,zoom: 8
  });
  return (
    <div className={styles.container}>
      <div className={styles.map}>
        <ReactMapGL
          {...viewport}
          onViewportChange={(nextViewport) => setViewport(nextViewport)}
          mapBoxApiAccesstoken={MAPBox_TOKEN}
          mapStyle="mapBox://styles/mapBox/dark-v9"
        />
      </div>
      <div className={styles.list}>List Container</div>
    </div>
  );
}

我尝试过使用 flexBox 但没有成功。我也更新了视口状态的宽高，没有区别。

相反，如果我使用 Google Maps 而不是 MapBox，那么地图容器可以完美运行，并且 Google Maps 的大小会根据窗口大小调整。

这里有一个最小的复制工作示例： https://codesandbox.io/s/xenodochial-waterfall-l6p03?file=/styles/Home.module.css

如果您能帮助解决此问题，我们将不胜感激。