Make material UI drawer stay the same size, instead of resizing when content size changes

Question

I'm using Material UI with a drawer.

Inside the drawer, is a set of Collapsible lists. When I expand the list, the list text items can be quite long, and the drawer jumps out much wider. I would like the drawer to have a width that is 30% of the window size, but when I try to set the classes on the drawer, neither root nor modal classNames seem to hold the drawer width in place.

This is the Drawer code:

<Drawer classes={drawerClasses} open={showStandardDrawer} anchor={"right"} onClose={closeDrawer}>

 {Array.from(items).map((item, index) => {
      return (
      <List
          key={`list-${index}`}
          component="div"
          aria-labelledby="nested-list-subheader"
          subheader={
             <ListSubheader component="div" id="nested-list-subheader">
                 {item.title}
             </ListSubheader>
          }
          className={classes.root}
      >
         { item.elements.map((el, index) => {
             return (
              <React.Fragment key={index}>
                  <ListItem key={index} button onClick={() => handleExpand(index)}>
                     <ListItemText primary={el.name} />
                          {open[index] ? <ExpandLess /> : <ExpandMore />}
                  </ListItem>
                  <Collapse in={open[index]} timeout="auto" unmountOnExit>
                      { el.descriptions.map((description, index) => {
                           return (
                               <List key={`l-${index}`} component="div" disablePadding>
                                 <ListItem button className={classes.nested} >
                                     <ListItemIcon>
                                        <StarBorder />
                                     </ListItemIcon>
                                     <ListItemText primary={description} primaryTypographyProps={{noWrap:true, width:'200px'} } />
                                   </ListItem>
                                </List>
                          )})
                    }
                    </Collapse>
               </React.Fragment>
            )
       })}
     </List>
    )
    })}
</Drawer>

and these are the classes applied to the drawer ('drawerClasses'):

{
    root: {
        maxWidth: '200px',
        minWidth: '50%',
        width: '50%',
        overflow: 'hidden'
    },
    modal: {
        maxWidth: '50%',
        minWidth: '50%',
        width: '50%'
    }
}

These aren't the styles I necessarily want, I'm just trying to see if I can get Drawer to size itself instead of sizing around its children.

Answer 1

Instead of modal, use the paper class. The Paper element within the drawer is the main visible container. The root and modal classes are applied to wrapper elements that are positioned in such a manner that their widths won't necessarily affect the Paper width.

Here's a code excerpt from the Permanent drawer demo:

const useStyles = makeStyles(theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
}));

...

      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >

https://codesandbox.io/s/zxljh