Невозможно точно настроить сетки в интерфейсе материала.

Я пытаюсь создать образец приложения для тестирования пользовательского интерфейса реагирующего материала, и я застрял при использовании сеток. У меня есть две сетки в моем приложении внутри основного контейнера сетки. Одна сетка предназначена для списков, а другая - для просмотра карты. теперь всякий раз, когда элементы списка увеличиваются, на странице отображается ползунок для его перемещения вверх / вниз, что мне не нужно, поскольку я хочу, чтобы карта оставалась стабильной на экране, покрывая 100% высоты и 80% ширины. Но как только размер списка увеличивается, карта также становится прокручиваемой на странице. Как я могу это исправить? Более того, мои кнопки списка также могут перемещаться по подзаголовку списка, что я не знаю, как это остановить.

мой код ...

import React from "react";
import {
  List,
  ListItem,
  Grid,
  Paper,
  Button,
  ListSubheader
} from "@material-ui/core";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./styles.css";
import Icon from "../src/icon.png";
import shadow from "../src/shadow.png";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      location: [
        {
          id: 1,
          machine: 1,
          lat: 51.503,
          lng: -0.091
        },

        {
          id: 2,
          machine: 2,
          lat: 51.56,
          lng: -0.094
        }
      ],
      center: [51.505, -0.091],
      zoom: 11,
      marker: null
    };
    this.clickAction = this.clickAction.bind(this);
  }

  Icon = L.icon({
    iconUrl: Icon,
    shadowUrl: shadow,
    iconSize: [38, 50],
    shadowSize: [50, 64],
    iconAnchor: [22, 34], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

  clickAction(id, lat, lng) {
    this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  }

  render() {
    const styles = {
      Paper: {
        padding: 20,
        marginTop: 10,
        marginBottom: 10,
        height: "90%",
        overflowY: "auto"
      }
    };

    return (
      <Grid container>
        <Grid item xs>
          <Paper style={styles.Paper}>
            <List
              style={{ width: "20%", float: "left" }}
              subheader={
                <ListSubheader component="div">
                  <div>
                    <h1> my appplication </h1>
                  </div>
                </ListSubheader>
              }
            >
              {this.state.location.map(({ id, machine, lat, lng }) => {
                return (
                  <>
                    <ListItem
                      key={id}
                      button
                      onClick={() => {
                        this.clickAction(id, lat, lng);
                      }}
                    >
                      Id {id} <br />
                      machine {machine}
                    </ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                  </>
                );
              })}
              <Button style={{ position: "sticky", botton: "0", left: "0" }}>
                sign out
              </Button>
            </List>
          </Paper>
        </Grid>

        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {this.state.location.map(({ lat, lng, id }) => {
            return (
              <Marker position={[lat, lng]} icon={this.Icon}>
                <Popup> {id} </Popup>
              </Marker>
            );
          })}
        </Map>
      </Grid>
    );
  }
}

...

мой образец приложения находится здесь https://codesandbox.io/s/rough-mountain-ogf4v?file=/src/App.js:0-3720