Sorry if this has been asked, I looked and couldn't find the answer!

I have a Material UI listview that has a set width (it's in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container's height and going multi-line?

Thanks so much in advance!

return (
            <ListItem
              key={network._id}
              selected={user.network && user.network._id === network._id}
            >
              <ListItemText
                primary={network.name}
                sx={{ maxWidth: '100%' }}
              />
              <IconButton>
                <DoubleArrowIcon />
              </IconButton>
            </ListItem>
          );