css (jss) popover, делающий ширину в зависимости от родителя и положения к середине экрана

Question

У меня есть поповер, у которого есть класс для его содержимого, называемый popoverPaper, а у контейнера Popover есть класс MuiPopper, я хочу отредактировать его с помощью css (jss), чтобы бумага поповера занимала все пространство контейнера и запускалась на границе div.

Я знаю, что содержимое поповера располагается над кнопкой, которая открывает поповер, я хочу, чтобы положение определялось положением внешнего div.

Это мой jss (css)

    const useStyles = makeStyles(theme => ({
  root: {
    display: 'block',
    margin: '0 auto',
    maxWidth: '50%',
    [theme.breakpoints.down('md')]: {
      maxWidth: '70%',
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '100%',
    },
    '& .experiences-column': {
      display: 'inline-block',
      verticalAlign: 'top',
      textAlign: 'center',
      '&.col1': {
        width: '36.31%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '&.col2': {
        width: '63.69%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '& .experience': {
        padding: 2,
        position: 'relative',
        '& img': {
          width: '100%',
          display: 'block',
        },
        '& .experience-title': {
          position: 'absolute',
          bottom: 30,
          left: 0,
          right: 0,
          textAlign: 'center',
        },

      },
    },
  },
  MuiPopover: {
    border: '2px solid #000',
  position: 'absolute',
  marginLeft: '15%',
  marginRight: '15%',

  },
  popoverPaper: {        
          height: '280px',
          '& img': {
            width: '100px',
            padding: '0 10px 0 10px',
          },

   },
  gastronomia: {
    backgroundColor: 'rgba(0,185,208,0.9)',
  },
  giftcard: {
    backgroundColor: 'rgba(221,165,174,0.9)',
  },
  deporte: {
    backgroundColor: 'rgba(189,143,205,0.9)',
  },
  productos: {
    backgroundColor: 'rgba(221,165,174,0.9)',
  },
  diversion: {
    backgroundColor: 'rgba(255,176,10,0.9)',
  },
  belleza: {
    backgroundColor: 'rgba(229,166,187,0.9)',
  },

}), { name: 'ExperiencesStyle' });

и это мой опыт const, где создается мой поповер

     const experience = (img, title, id, popoverCategory) => (
  <div
    className="experience"
    aria-describedby={id}
    id={id}
    onClick={handleClick}
    onKeyDown={handleClick}
    role="button"
    tabIndex="0"
  >
    <img
      data-sizes="auto"
      className="lazyload"
      data-src={img}
      alt={title}
    />
    <div className="experience-title">
      <Typography
        color="textSecondary"
        variant="subtitle2"
        className="highlight highlight1"
        display="inline"
      >
        { title }
      </Typography>
    </div>



    <Popover
      id={id}
      open={anchorEl && anchorEl.id === id}
      anchorEl={anchorEl}
      onClose={handleClose}
      classes={{root: classes.MuiPopover, }}
    >
    <div 
      className={clsx(classes[id])}>
      <Button onClickAway={handleClose}>x</Button>
       <div className={classes.popoverPaper}>
        {
          popoverCategory.map(url => (

            <img
              key={id}
              data-sizes="auto"
              className="lazyload"
              src={url}
              alt={title}
            />
          ))
        }
      </div>
      </div>
  </Popover>
  </div>

);