How do I make all the contents of a Grid item stretch to the bottom, minus the typography?

Question

I have four columns in a Grid container, each with the following structure:

    <Grid item>
       <Typography>Big Title 1</Typography>
         <Card className={classes.stretchMe}>
            <CardContent>
                Content
            </CardContent>
         </Card>
    </Grid>

I would like the Card with class stretchMe to stretch to the bottom of the parent Grid item, but because each Card has a Typography component above it, it stretches beyond the height of the parent div.

How do I get all the Cards to stretch to the bottom of the parent Grid item and no further (i.e. minus the height of the Typography)?

Here is a slightly more complex version of the code:

import React from 'react';

const useStyles = makeStyles(theme => ({
  divider: {
    borderBottom: `1px solid ${theme.palette.divider}`,
  },
  stretchMe: {
    height: '100%',
  },
}));

const Cards= () => {
  const classes = useStyles();

  return (
      <Grid container item xs={12} spacing={3} justify="space-between" alignItems="stretch">
        <Grid item xl={2} lg={2} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 1 
          </Typography>
          <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
              <Typography variant="h6">Little Title 1</Typography>
              <Avatar />
            </CardContent>
            <CardContent className={classes.divider}>
              <Typography variant="h6">Little Title 2</Typography>
              <Typography variant="h4">Content</Typography>
            </CardContent>
            <CardContent className={classes.divider}>
              <Grid container>
                <Grid item xs={6}>
                  <Typography variant="h6">Little Title 3</Typography>
                  <Typography variant="h4">Content</Typography>
                </Grid>
                <Grid item xs={6}>
                  <Typography variant="h6">Little Title 4</Typography>
                  <Typography variant="h4">Content</Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xl={4} lg={4} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 2
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent>Content</CardContent>
          </Card>
        </Grid>
        <Grid item xl={3} lg={3} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 3
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent>Content</CardContent>
          </Card>
        </Grid>
        <Grid item xl={3} lg={3} md={6} xs={12}>
          <Typography variant="h4">
            Big Title 4
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent className={classes.divider}>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
            </CardContent>
          </Card>
        </Grid>
    </Grid>
  );
};

export default Cards;

Many thanks,

Katie

EDIT

Here is the problem - the Grid items are stretching beyond the Grid containers

And here is the desired output:

My suspicion is that the Big titles are pushing the Cards down?

Answer 1

Pass the prop as a variable using JSX, not as a string. Do:

<Card className={classes.stretchMe}>

Instead of:

<Card className="classes.stretchMe">

UPDATE

1. Use flex:1 on the cards so they use all the remaining space
2. Set the sub Grids with the container and direction="column" to that the elements are correctly placed.

The code should look like this:

const useStyles = makeStyles((theme) => ({
    divider: {
    borderBottom: `1px solid ${theme.palette.divider}`
    },
    stretchMe: {
    height: "100%",
    flex: 1
    }
}));

const Cards= () => {
    const classes = useStyles();

    return (
    <Grid
        style={{backgroundColor:"cyan"}}
        container
        xs={12}
        spacing={3}
        justify="space-between"
        alignItems="stretch"
    >
        <Grid container direction="column" item xl={2} lg={2} md={6} xs={12}>
        <Typography variant="h4">Big Title 1</Typography>
        <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 1</Typography>
            <Avatar />
            </CardContent>
            <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 2</Typography>
            <Typography variant="h4">Content</Typography>
            </CardContent>
            <CardContent className={classes.divider}>
            <Grid container>
                <Grid item xs={6}>
                <Typography variant="h6">Little Title 3</Typography>
                <Typography variant="h4">Content</Typography>
                </Grid>
                <Grid item xs={6}>
                <Typography variant="h6">Little Title 4</Typography>
                <Typography variant="h4">Content</Typography>
                </Grid>
            </Grid>
            </CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item xl={4} lg={4} md={6} xs={12}>
        <Typography variant="h4">Big Title 2</Typography>
        <Card className={classes.stretchMe}>
            <CardContent>Content</CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item  xl={3} lg={3} md={6} xs={12}>
        <Typography variant="h4">Big Title 3</Typography>
        <Card className={classes.stretchMe}>
            <CardContent>Content</CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
        <Typography variant="h4">Big Title 4</Typography>
        <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            </CardContent>
        </Card>
        </Grid>
    </Grid>
    );
};

export default Cards;

Answer 2

This is because you passed the className prop as a string, not a variable.

So, correct format should be className={classes.stretchMe}

import React from 'react';

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100%"
  },
  divider: {
    borderBottom: `1px solid ${theme.palette.divider}`,
    "&:last-child": {
      flex: "1"
    }
  },
  stretchMe: {
    display: "flex",
    flexDirection: "column",
    flex: "1"
  },
  gridItem: {
    display: "flex",
    flexDirection: "column"
  }
}));

const Cards= () => {
  const classes = useStyles();

  return (
    <Grid container spacing={2} className={classes.root}>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 1</Typography>
        <Card className={classes.stretchMe}>
          <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 1</Typography>
            <Avatar />
          </CardContent>
          <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 2</Typography>
            <Typography variant="h4">Content</Typography>
          </CardContent>
          <CardContent className={classes.divider}>
            <Grid container direction="row">
              <Grid item xs={6}>
                <Typography variant="h6">Little Title 3</Typography>
                <Typography variant="h4">Content</Typography>
              </Grid>
              <Grid item xs={6}>
                <Typography variant="h6">Little Title 4</Typography>
                <Typography variant="h4">Content</Typography>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 2</Typography>
        <Card className={classes.stretchMe}>
          <CardContent>Content</CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 3</Typography>
        <Card className={classes.stretchMe}>
          <CardContent>Content</CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 4</Typography>
        <Card className={classes.stretchMe}>
          <CardContent className={classes.divider}>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
};

export default Cards;