Html 网格项高度与响应的方形子项不匹配

我正在创建一个带有React和MaterialUI的web应用程序。我需要一个地图组件的响应方形div，但是，由于父网格div不展开，因此使用会打断网格布局

我尝试过将正方形的类移动到网格元素，但这没有帮助

map: {
    height: '100%', width: '100%', position: 'absolute'
},
mapContainer: {
    height: '0',
    paddingBottom: '100%',
    position: 'relative'
},

//地图

---

网格项的高度与正方形的大小不匹配。这是以下项目的问题。

对于

响应式

正方形，您应该使用

材质UI提供的

在代码中使用
Grid
的一个简单更改可能是

<Grid container justify={"center"}>
   <Grid item xs={6}>
      <Paper className={classes.paper}>Your Map Here</Paper>
    </Grid>
</Grid>

我已经更新了一个代码沙盒，在

我希望这有帮助。谢谢
不幸的是，这并没有强制网格项的内容为正方形，这正是我在这里需要的。我更新了codesandbox和链接。一旦你适应了你的地图，你应该在约束中看到它，试试看。如果没有，请分叉此沙箱，添加地图并共享itI无法将其添加到沙箱中，因为地图元素是Google map React，这会引入跨源问题。但是，我用div模拟了地图。div的大小不是正方形（你看不到）。我又试了一次，但是CORS的问题让我感到很难受。您是否有一个
apiKey
，可以在问题解决后私下共享并删除？您不需要使用谷歌地图，因为它与高度为100%、宽度为100%的div相同。谢谢你的帮助。
root: {
    flexGrow: 1,
    height: "50vh",
    width: "50vh"
  },