Elements overflowing through component in React

Question

In a React project, I've create a Recharge Wallet page, which has Recharge button to recharge coins. A new page is created by overriding on another page. All the elements are created in Material UI. For some reason, all elements are overflowing through the components. Its probably CSS issue. What could be the best solution to prevent overflowing.

Following is the code reference

const navScrollStyle = makeStyles((theme) => ({
  root: {
    marginTop: '70px',
    display: 'table',
    overflowY: 'hidden',
    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: {
    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 NewPage = () => {

  const navBody = navBodyStyle()
  const navScroll = navScrollStyle()
  const gridClass = gridClassStyle()

  const classes5 = useStyles5()

  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>Wallet</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 className={classes5.root}>
            <Button variant="contained" color="secondary">
              <Link to="/purchaseCoins">
                Recharge Wallet
        </Link>
            </Button>
            <br />

            <Button variant="contained" color="secondary">
              <Link to="/purchaseCoins">
                Recharge Wallet
              </Link>
            </Button>
            <br />
          </div>

        </div>
    </div>

  )
}

I have purposefully added recharge wallet button to test the overflowing.

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

Answer 1

I changed the marginTop of navScrollStyle, overflowY to auto, and assigned a zIndex to the gridClassStyle. I think it's what you were looking for. Please check the online version here on sandbox

Answer 2

You gave 70px to the Wallet component, and I think you can give the height value of calc (100% - 70px). You must adjust the height as much as the margin-top px.