reactjs - 将滚动条限制在反应网格中的特定高度

Question

我想在带有滚动条的网格中显示项目以进行溢出。但是应该限制滚动条的高度，如图所示，以显示父网格中的条目数。

我想在滚动条上方显示每个网格中的项目数。目前，滚动条占据了网格左侧的全部空间。

  <Grid container spacing={3}>
    <Grid item  xs>
      <Paper className="flex-col-scroll">
      
        <Paper
          className={classes.paperStyle}
          style={{direction: 'ltr' }}
        >
          Fedex
        </Paper>
        <Paper className={classes.paper} style = {{direction: 'ltr'}} onClick={handleClick}>
          <Grid container  spacing={4}>
            <Grid item xs>
              <Typography variant="caption">Fl</Typography>
            </Grid>
            <Grid style = {{overflow: 'hidden'}}item xs>
              <Typography variant="caption">Icon </Typography>
            </Grid>
            <Grid style = {{overflow: 'hidden'}}item xs>
              <Typography variant="caption">Samsung</Typography>
            </Grid>
            <Grid item xs>
              <Typography variant="caption">#230-897</Typography>
            </Grid>
          </Grid>
        </Paper>
        <Paper className={classes.paper}>Carrier</Paper>
        <Paper className={classes.paper}>Carrier</Paper>
        <Paper className={classes.paper}>Carrier</Paper>
      </Paper>
    </Grid>

CSS：

   .flex-col-scroll {
  flex-grow: 1;
  overflow: auto;
  height: 200px;
  direction: rtl;
}

::-webkit-scrollbar {
  width: 12px;
  border: 5px solid white;

}

::-webkit-scrollbar-button {
  background-size:100%;
  height:11px;
  width:11px;
}

::-webkit-scrollbar-button:end {
  display:block;
}

::-webkit-scrollbar-button:start {
  display:block;
}


::-webkit-scrollbar-button:vertical:increment {
  background-image:url(icons/down.png);
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image:url(icons/up.png);
}

以上是用于显示网格的html和css。

标签： reactjsmaterial-ui