使用flex-grow无法在div内填充网格/纸的高度：1

Question

我有一个display: flex, flex-direction: column, height: 100vh的父div，在那另外2个div内。第一个具有固定的高度，第二个具有属性flex-grow: 1，它们填充了所有可用的高度。但是，当我在Grid or Paper的最后一个div中放入height: 100%时，它并没有占据其父级的所有可用高度。

可以给我一些帮助吗？

const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
    padding: 20
  },
  paper1: {
    padding: 15,
    backgroundColor: 'yellow',
    height: 200
  },
  paper2: {
    padding: 15,
    backgroundColor: 'red',
    flexGrow: 1
  }
};

export default class Home extends Component<Props> {
  props: Props;

  render() {
    return (
      <div style={styles.root}>
        <div style={styles.paper1}>
          <Paper style={{ height: '100%', padding: 20 }}>
            <Grid container direction="column" justify="center">
              <Grid item xs={12}>
                <img src={logo} alt="Logo" height="40" />
                <img
                  src={logo_series}
                  alt="Logo Series"
                  height="40"
                  style={{ marginLeft: 10 }}
                />
              </Grid>
              <Grid item xs={12}>
                <Typography component="h2">Config and Options Bar</Typography>
              </Grid>
            </Grid>
          </Paper>
        </div>
        <div style={styles.paper2}>
          <Paper style={{ height: '100%', padding: 20 }}>
            <Grid container direction="column" justify="center">
              <Grid item xs={12}>
                <img src={logo} alt="Logo" height="40" />
                <img
                  src={logo_series}
                  alt="Logo Series"
                  height="40"
                  style={{ marginLeft: 10 }}
                />
              </Grid>
              <Grid item xs={12}>
                <Typography component="h2">Config and Options Bar</Typography>
              </Grid>
            </Grid>
          </Paper>
        </div>
      </div>
    );
  }
}