Grid Item无法自适应收缩以适配内部Scrollable List问题求助

我正尝试让包含滚动列表的Grid Item进行收缩，使返回按钮紧贴在列表下方。列表周围的Grid和Box组件是从其他父组件中提取的，为简化整合到了单个文件中。

import * as React from "react";
import {
  Box,
  Button,
  Grid,
  List,
  ListItem,
  ListItemText,
  ListItemButton,
  AppBar,
  Toolbar,
  Typography,
} from "@mui/material";

const usersList = [
  "user1",
  "user2",
  "user3",
  "user4",
  "user5",
  "user6",
  "user7",
  "user8",
  "user9",
  "user10",
];

function App() {
  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <Grid container justifyContent="center">
        <Grid item xs={12} md={8}>
          <AppBar position="static">
            <Toolbar>
              <Typography variant="h6">Scrollable List</Typography>
            </Toolbar>
          </AppBar>
        </Grid>

        <Grid item xs={12} md={8}>
          <Box>
            <Grid container justifyContent="center">
              <Grid item xs={12}>
                <List sx={{ maxHeight: "50%", overflow: "auto" }}>
                  {usersList.map((user, index) => {
                    return (
                      <ListItem disablePadding key={index}>
                        <ListItemButton>
                          <ListItemText>{user}</ListItemText>
                        </ListItemButton>
                      </ListItem>
                    );
                  })}
                </List>
              </Grid>
            </Grid>
            <Grid container justifyContent="center">
              <Grid item xs={8}>
                <Button
                  name="back"
                  variant="contained"
                  color="primary"
                  value="back"
                  fullWidth
                  size="small"
                >
                  Back
                </Button>
              </Grid>
            </Grid>
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者aht2000