Single line image list in react material UI

Question

In React Material UI, I don't want to scroll bar that below image list. How can I remove that? I want to be Multiple Images in a single line without a scroll bar (overflow x)

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
    backgroundColor: theme.palette.background.paper,
  },
  imageList: {
    flexWrap: 'nowrap',
    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
    transform: 'translateZ(0)',
  },
  title: {
    color: theme.palette.primary.light,
  },
  titleBar: {
    background:
      'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
  },
}));

export default function PromotionProduct(params) {
  const classes = useStyles();

  return (
    <Container className='mt-4 '>
      <Grid container spacing={3} className='pb-2'>
        <Grid item xs={6} className='pb-0'>
          <p className='mb-0'> PROMOTIONS Products</p>
        </Grid>
        <Grid item xs={6} className='pb-0'>
          <div className='tertiary-text text-right'>View More</div>
        </Grid>
      </Grid>

      <div className={classes.root}>
        <ImageList className={classes.imageList} cols={1.3}>
          <ImageListItem>
            <img src={image} />
            <ImageListItemBar
              title='Product'
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star Product`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </ImageListItem>
          <ImageListItem>
            <img src={image} />
            <ImageListItemBar
              title='Product'
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star Product`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </ImageListItem>
          <ImageListItem>
            <img src={image} />
            <ImageListItemBar
              title='Product'
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star Product`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </ImageListItem>
        </ImageList>
      </div>
    </Container>
  );
}

Answer 1

If you want to hide the scrollbar but keep scrolling functionality:

  imageList: {
    flexWrap: 'nowrap',
    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
    transform: 'translateZ(0)',
    
    // Hide Scrollbar
    '-ms-overflow-style': 'none',  /* IE and Edge */
    'scrollbar-width': 'none'  /* Firefox */
    '&::-webkit-scrollbar': { /* Chrome */
        display: none;
    }:
  }

Answer 2

If you don't want to scroll the images and image fill the width of the box you can use flex style the parent box should be flex:1 and flex-direction:row and images should be flex:1 so their had equal width and fill the parent width