Grid item height not matching responsive square child

Question

I'm creating a web application with React and Material-ui. I need a responsive square div for a map component, however, using a trick from iamsteve.me breaks the grid layout as the parent Grid div does not expand.

I have tried moving the class which is square to the grid element, but this doesn't help.

map: {
    height: '100%', width: '100%', position: 'absolute'
},
mapContainer: {
    height: '0',
    paddingBottom: '100%',
    position: 'relative'
},

<Grid item>
  <div className={classes.mapContainer}>
    <Paper className={classes.map}>
    // map
    </Paper>
  </div>
</Grid>

The height of the Grid item does not match the size of the square. This is an issue for items that follow.

Answer 1

For responsive square, you should use Grid provided by Material-UI .

A simple change in your code to use Grid could be this

<Grid container justify={"center"}>
   <Grid item xs={6}>
      <Paper className={classes.paper}>Your Map Here</Paper>
    </Grid>
</Grid>

To constrain the width of the containing element, you can do

root: {
    flexGrow: 1,
    height: "50vh",
    width: "50vh"
  },

I have updated a Codesandbox demonstrating it at https://codesandbox.io/s/material-demo-pjssu

I hope this helps. Thanks