Purpose of flexGrow in the parent div of a Material UI grid?

css reactjs flexbox material-ui

11,899

The comment by Anthony mentioned above seems the right answer to me. If the parent is set to display:flex and child component being loaded does not have flex:1 or flex-grow:1 then it will not take up 100% width of the parent.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div style="border:1px solid black; padding:2px; ">
    <div style="border:1px solid red; ">parent is not flex container - child div takes 100% width</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; ">
    <div style="border:1px solid red; flex-grow:1; ">parent is not flex container - child div takes 100% width</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; display:flex; ">
    <div style="border:1px solid red; ">parent is flex container - sorry</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; display:flex; ">
    <div style="border:1px solid red; display:flex; flex-grow:1;">parent is flex container - child div takes 100%</div>
  </div>
</body>
</html>

11,899

Author by

Kurt Peek

Hi, I'm Kurt Peek, a backend engineer at Apple.

Updated on June 19, 2022

Comments

Kurt Peek almost 2 years

I'm trying to understand this code example, https://codesandbox.io/s/9rvlm, from the examples in the Material UI docs (https://material-ui.com/components/grid/):

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 => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);

My question is: what is the purpose of assigning flexGrow: 1 to the parent div element?

As I understand from https://material-ui.com/system/flexbox/#flex-grow and https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow, flex-grow 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 CenteredGrid is displayed (as <Demo/>) directly in the root div.

Are the styles.root applied to the parent div 'just in case' the component is rendered in a flex container? I'd appreciate some clarification.