Material-UI：网格内部的全宽列表

Question

使用material-ui，我试图在<List />列中创建一个<Grid />。我希望列表在溢出时滚动，但也要占用它所在的网格的宽度。我可以使它们同时工作，但不能同时工作。具有<Grid />的第一部分是overflowY正常运行，但没有<ListItem />的整个宽度：

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  list: {
    flexGrow: 1,
    position: 'absolute',
    overflow: 'auto',
    bottom: '1em',
    top: '1em',
  },
})
...
<Grid item xs>
  <List classes={{ root: classes.list }}>
    {genereateData(35).map(item => (
      <ListItem button>
        <ListItemText primary={item} />
      </ListItem>
  ))}
  </List>
</Grid>
...
<List classes={{ root: classes.root }}>

但是如果我将行切换到全角部分上方的最后一点代码，则可以使用。那么，为什么flexGrow: 1可以在root道具中工作而不能在list道具中工作，并且有办法同时获得两者？我认为它与position: absolute有关，但是我不能摆脱它。只是寻找一种兼具两者的方式。

这里是codesandbox！