How to hide scroll inside div of a Component in React?

Question

In a React project I've details of wallet scrolling in a div named 'History'. Issue is that history details is scrolling without any issue, but, I want to hide inside 'History' div. How could it be done? Any appropriate solution?

Below is the code reference

const navScrollStyle = makeStyles((theme) => ({
  root: {
    marginTop: "120px",
    display: "table",
    overflowY: "auto",
    maxWidth: "auto",
    display: "flex",
    justifyContent: "center"
  }
}));

const navBodyStyle = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    top: "0px",
    position: "absolute",
    width: "100%",
    height: "100vh",
    textAlign: "center",
    background: "white",
    zIndex: "9",
    height: "100%",
    overflowY: "auto"
  },
  menuButton: {
    marginRight: theme.spacing(2),
    color: "purple"
  },
  title: {
    flexGrow: 1,
    textAlign: "center",
    color: "black"
  }
}));

const gridClassStyle = makeStyles((theme) => ({
  root: {
    zIndex: "100",
    flexGrow: 1,
    position: "fixed",
    top: "0px",
    background: "white",
    flexWrap: "nowrap",
    boxShadow: "5px 10px 18px #888888"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  },
  menuButton: {
    marginRight: theme.spacing(2),
    color: "purple"
  },
  title: {
    flexGrow: 1,
    textAlign: "center",
    color: "black"
  }
}));

const useStyles5 = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    },
    textAlign: "center",
    width: "100%"
  }
}));

const useStyles = makeStyles((theme) => ({
  root: {
    top: "20px",
    width: "100%",
    maxWidth: "auto"
  },
  nested: {
    paddingLeft: theme.spacing(4)
  }
}));

const TestPageScroll = () => {
  const navBody = navBodyStyle();
  const navScroll = navScrollStyle();
  const gridClass = gridClassStyle();

  const classes5 = useStyles5();

  const classes = useStyles();

  const NavPart = () => (
    <Grid className={gridClass.root} container spacing={3}>
      <Grid item xs={4} style={{ textAlign: "left" }}>
        <IconButton
          edge="start"
          className={gridClass.menuButton}
          color="inherit"
          aria-label="menu"
        >
          <Link to="/">
            <ArrowBackIcon />
          </Link>
        </IconButton>
      </Grid>
      <Grid
        item
        xs={4}
        style={{ textAlign: "center", justifyContent: "center" }}
      >
        <Typography variant="h6" className={gridClass.title}>
          <h2>Test Scroll</h2>
        </Typography>
      </Grid>
      <Grid item xs={4} style={{ textAlign: "right", marginTop: "2%" }}>
        <IconButton
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
        >
          <AccountCircle style={{ fontSize: "30px" }} />
        </IconButton>
      </Grid>
    </Grid>
  );
  return (
    <div className={navBody.root}>
      {NavPart()}
      <div className={navScroll.root}>

      </div>

      {/* Here the main code begins */}
      <div style={{ height: "100px" }}>
        <div
          style={{
            position: "fixed",
            zIndex: "100",
            background: "white",
            width: "100%"
          }}
        >
          <h2>History</h2>
        </div>
        <hr />

        <List
          component="nav"
          aria-labelledby="nested-list-subheader"
          className={classes.root}
        >
          <>
            {/* Here purposely List are added to test overflow */}
            <div style={{ overflowY: "auto", background: "red" }}>
              <ListItem>
                <h6>Wallet History1</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />
            </div>
          </>
        </List>
      </div>
    </div>
  );
};

As you can see below in the picture, Wallet history details is seen clearly which I want to hide inside 'History' div

Here is the codesandbox link for your reference: https://codesandbox.io/s/react-material-forked-71op5 Please click on 'WALLET' button when page loads

Answer 1

The problem is your History div is fixed and your Wallet History List div has no bounds on height which is getting scrolled behind the fixed divs above. one way to solve this problem is to limit your height of your Wallet History List div and make it fixed as well.

eg. add these style to your div for list

maxHeight : "800px", position :"fixed", width:"100%"