Javascript 无法在材质界面中准确设置网格

我试图制作一个示例应用程序来测试react material ui，但在使用网格时遇到了问题。在主网格容器中，我的应用程序中有两个网格。一个网格用于列表，另一个用于地图视图。现在，每当列表项增加时，页面上就会显示一个滚动条来上下移动它，我不希望这样，因为我希望地图在屏幕上保持稳定，覆盖100%的高度和80%的宽度。但一旦列表大小增加，地图也会在页面中滚动。我怎样才能修好它？此外，我的列表按钮也可以在列表子标题上移动，我不知道如何停止

我的代码是

从“React”导入React；
进口{
列表
列表项，
网格，
纸张
按钮
列表副标题
}来自“@材料界面/核心”；
从“反应传单”导入{Map，Marker，Popup，tillelayer}；
从“传单”中输入L；
导入“传单/目录/传单.css”；
导入“/styles.css”；
从“./src/Icon.png”导入图标；
从“./src/shadow.png”导入阴影；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
此.state={
地点：[
{
id:1，
机器：1，
拉脱维亚：51.503，
液化天然气：-0.091
},
{
id:2，
机器：2，
拉脱维亚：51.56，
液化天然气：-0.094
}
],
中间：[51.505，-0.091]，
缩放：11，
标记：空
};
this.clickAction=this.clickAction.bind（this）；
}
Icon=L.Icon({
iconUrl：图标，
shadowUrl:shadow，
iconSize:[38,50]，
阴影大小：[50,64]，
iconAnchor:[22,34]，//图标的点，该点将对应于标记的位置
暗影主播：[4,62]，
popupAnchor:[-3，-76]//相对于iconAnchor打开弹出窗口的点
});
单击操作（id、lat、lng）{
setState（{marker:id，zoom:16，center:[lat，lng]}）；
}
render（）{
常量样式={
论文：{
填充：20，
玛金托普：10，
marginBottom:10，
身高：“90%”，
溢出：“自动”
}
};
返回(
{this.state.location.map（{id，machine，lat，lng}）=>{
返回(
{
点击操作（id、lat、lng）；
}}
>
Id{Id}

机器{machine}
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
);
})}
退出
{this.state.location.map（{lat，lng，id}）=>{
返回(
{id}
);
})}
);
}
}

---

我的示例应用程序在这里

您需要删除这些：

  padding: 20,
  marginTop: 10,
  marginBottom: 10,

将

height:100vh

添加到

style

中，并将

style={{{backgroundColor:“white”}

添加到

列表子标题中

没问题。如果答案对你有帮助，请和/或向上投票。您好，我在列表中的整个文本基本上倾向于左侧，尽管右侧仍然有很大的空间，按钮也是如此，它们只能从最左侧点击。你需要做的第一件事就是接受你所说的答案，因为它有效地解决了你的问题。第二件事，打开一个新的帖子来问你的新问题，因为它与原来的帖子完全不同。接受答案意味着你点击投票按钮下面的绿色箭头勾号。检查。你没有那样做。如果每个问题都解决了你的问题，那么你应该始终接受答案，因为你得到了一个令人满意的答案，解决了你的问题。不仅是这一个，而且在你的其他帖子的所有答案中，如果他们已经解决了你的问题。
  padding: 20,
  marginTop: 10,
  marginBottom: 10,