材料 ui 网格内的水平滚动反应

Question

我正在尝试实现一个水平滚动条，但我无法让它显示出来。我试过设置宽度，但似乎没有任何改变。

以下是样式：

const useStyles = makeStyles({
  flag: {
    height: "1.3rem",
    width: "1.3rem",
    marginRight: "0.5rem",
  },
  name: {
    color: "black",
    fontWeight: 550,
    fontSize: 14,
  },
  incidentText: {
    color: "grey",
    fontSize: 14,
  },
  incidentDiv: {
    // height: "10rem",
    // width: "44rem",
    overflowX: "scroll",
  }
});

这是代码：

<Grid container direction="column">
      <Grid item>
        <Grid container direction="row" xs={12}>
          <Grid container xs={6}>
            <Grid item>
              <img src={Flag} alt="incident flag" className={classes.flag} />
            </Grid>
            <Grid item>
              <Typography>Recent Incidents</Typography>
            </Grid>
          </Grid>
          <Grid container justify="flex-end" xs={6}>
            <Grid item>
              <Typography>45 total</Typography>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
      <Grid container direction="row" className={classes.incidentDiv}>
        {userList.map((user) => {
          return (
            <SmallCard>
              <Grid container xs={12}>
                <Grid item xs={4}>
                  <Avatar src={user.profile_pic} />
                </Grid>
                <Grid item container direction="column" xs={8}>
                  <Grid item>
                    <Typography className={classes.name}>{user.first_name} {user.last_name}</Typography>
                  </Grid>
                  <Grid item>
                    <Typography className={classes.incidentText}>
                      {user.report}
                    </Typography>
                  </Grid>
                </Grid>
              </Grid>
            </SmallCard>
          )
        })}
      </Grid>
    </Grid>

我尝试实现滚动的位置在“incidentDIV”中