title: Purpose of flexGrow in the parent div of a Material UI grid?
body: <p>I'm trying to understand this code example, <a href="https://codesandbox.io/s/9rvlm" rel="noreferrer">https://codesandbox.io/s/9rvlm</a>, from the examples in the Material UI docs (<a href="https://material-ui.com/components/grid/" rel="noreferrer">https://material-ui.com/components/grid/</a>):</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Paper from '@material-ui/core/Paper';
  import Grid from '@material-ui/core/Grid';
  
  const styles = theme =&gt; ({
    root: {
      flexGrow: 1,
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.secondary,
    },
  });
  
  function CenteredGrid(props) {
    const { classes } = props;
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Grid container spacing={3}&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Paper className={classes.paper}&gt;xs=12&lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={6}&gt;
            &lt;Paper className={classes.paper}&gt;xs=6&lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={6}&gt;
            &lt;Paper className={classes.paper}&gt;xs=6&lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;
            &lt;Paper className={classes.paper}&gt;xs=3&lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;
            &lt;Paper className={classes.paper}&gt;xs=3&lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;
            &lt;Paper className={classes.paper}&gt;xs=3&lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;
            &lt;Paper className={classes.paper}&gt;xs=3&lt;/Paper&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }
  
  CenteredGrid.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(CenteredGrid);
  </code></pre>
  
  <p>My question is: what is the purpose of assigning <code>flexGrow: 1</code> to the parent <code>div</code> element?</p>
  
  <p>As I understand from <a href="https://material-ui.com/system/flexbox/#flex-grow" rel="noreferrer">https://material-ui.com/system/flexbox/#flex-grow</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow</a>, <code>flex-grow</code> is a CSS property of items of flex containers. In this example though, I don't see there being a flex container element containing this component; the <code>CenteredGrid</code> is displayed (as <code>&lt;Demo/&gt;</code>) directly in the root div.</p>
  
  <p>Are the <code>styles.root</code> applied to the parent div 'just in case' the component is rendered in a flex container? I'd appreciate some clarification.</p>