Impossible de définir le contenu de ma grille sur la même hauteur

Je veux que toutes les cartes de ma grille aient la même hauteur. J'essaie depuis des heures avec le chrome, testant diverses combinaisons mais je ne parviens pas à obtenir le résultat souhaité. Je veux que la partie du contenu de la carte (rose) se développe pour que tout soit dans la même ligne.

Les cellules de la grille sont parfaites. Mais si je fais grandir la carte ou la mets à 100% de hauteur, elle remplit l'élément de la grille (qui est montré sur l'image 1) avec du papier (image 2). J'ai fait la même chose pour tous les enfants (en particulier la zone de texte), mais ils ne s'étendent pas.

J'ai essayé d'étirer, de changer d'affichage, de hauteur, etc. Vous voulez éviter une hauteur fixe (même dépendante de la fenêtre d'affichage ) ou hauteur max fixe à tout prix. Des idées?

Modifier: il vaut peut-être la peine de mentionner que le plus proche du résultat souhaité est de définir display: content dans CardActionArea sous-élément. La carte est exactement comme je le veux sauf qu'elle pousse mon texte en bas.

Voici le code de mes styles et de ma première carte - je laisserai les commentaires pour montrer certaines des choses qui ont été essayé et testé (certains codes ne sont pas non plus pertinents mais je vais le laisser au cas où quelque chose sabote ce que j'essaie de faire):

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  grid: {}, //grid works exactly as I want it
  gridItem: {
    [theme.breakpoints.up("md")]: {
      padding: "32px !important"
    }
    // display: "flex",
    // flexDirection: "column",
    // justifyContent: "space-between",
    // alignItems: "stretch"
    // [theme.breakpoints.down("sm")]: {
    //   padding: theme.spacing(0)
    // }
  },
  card: {
    "&:hover": {
      boxShadow:
        "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(255, 255, 255, 0.23)",
      // margin: "-10px auto 0",
      // transform: "scale(1.01)",
      // boxShadow: "-6px 4px 3px rgba(38, 38, 38, 0.2)",
      // top: "-4px",
      transition: ["boxShadow", "margin"],
      transitionDuration: 300
    },
    display: "flex",
    flexFlow: "column"
    // flexDirection: "column",
    // justifyContent: "space-between",
    // alignItems: "stretch",
    // height: "100%"

    // maxWidth: "300px",
    // maxHeight: 345
    // boxShadow:
    //   "10px 10px 5px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.43)"
    // display: "block",
    // width: "100%",
  },
  media: {
    height: "auto",
    width: "100%",
    objectFit: "cover"
    // margin: "-70px auto 0",
    // width: "80%",
    // height: 140,
    // borderRadius: "4px",
    // boxShadow: "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)",
    // position: "relative",
    // zIndex: 1000
  },
  content: {
    background: "linear-gradient(to right, #ee9ca7, #ffdde1)",
    padding: "10px",
    flexGrow: 1
    // display: "flex"
    // flexDirection: "column",
    // justifyContent: "space-between",
    // alignItems: "stretch",
    // height: "100%"
  },
  contHead: {
    color: "black",
    marginBottom: "3px"
  },
  contText: {
    color: "black"
  },
  buttonArea: {
    background: "linear-gradient(to right, #000000, #434343)",

    // display: "flex", //card has flex by default
    flexFlow: "wrap",
    justifyContent: "center",
    padding: "0"
  },
  buttons: {
    // backgroundColor: "white",
    padding: "0",
    minHeight: "29px",
    marginLeft: "0 !important",
    marginTop: "5px",
    marginBottom: "5px"
  },
  icons: { color: "white", fontSize: "1.8rem" },
  iconsTBA: { color: "#9c7e82", fontSize: "1.3rem" },
  toolTips: {
    // backgroundColor: "#f5f5f9",
    backgroundColor: "rgba(0, 0, 0, 1)",
    maxWidth: 350,
    // // maxHeight: 100,
    fontSize: theme.typography.pxToRem(14),
    // border: "1px solid #dadde9",
    // // transform: "translate(100px, 200px) rotate(50deg)"
    // // transform: "translate(50%,90%)"
    // marginLeft: "23vw",
    // marginTop: "90vh",
    [theme.breakpoints.down("sm")]: {
      marginBottom: "35vh"
    }
  },
  toolTipsCard: {
    fontSize: theme.typography.pxToRem(20)
  }
}));

//Tooltip info
const rpgTT = "test";

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

  return (
    <div className="full-container-2">
      <div className={classes.root}>
        <Grid className={classes.grid} container spacing={3}>
          <Grid className={classes.gridItem} item xs={12} sm={6} md={4} lg={4}>
            <Card className={classes.card}>
              <Tooltip
                classes={{ tooltip: classes.toolTipsCard }}
                TransitionComponent={Zoom}
                title="Play"
                placement="top"
              >
                <CardActionArea>
                  <CardMedia className={classes.media} image={pic1} />
                  <CardContent className={classes.content}>
                    <Typography
                      className={classes.contHead}
                      gutterBottom
                      variant="h5"
                      component="h2"
                    >
                      Game Title
                    </Typography>
                    <Typography
                      className={classes.contText}
                      variant="body2"
                      color="textSecondary"
                      component="p"
                    >
                      This is a small string
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Tooltip>
              <CardActions className={classes.buttonArea}>
                <Button className={classes.buttons}>
                  <FontAwesomeIcon
                    title="Not Available Yet"
                    className={classes.iconsTBA}
                    icon={faWindows}
                  />
                </Button>
                <Button className={classes.buttons}>
                  <FontAwesomeIcon
                    title="Not Available Yet"
                    className={classes.iconsTBA}
                    icon={faLinux}
                  />
                </Button>
                <Button className={classes.buttons}>
                  <FontAwesomeIcon className={classes.icons} icon={faGithub} />
                </Button>

                <Tooltip
                  classes={{ tooltip: classes.toolTips }}
                  TransitionComponent={Zoom}
                  title={rpgTT}
                  placement="bottom"
                >
                  <Button className={classes.buttons}>
                    <FontAwesomeIcon
                      className={classes.icons}
                      icon={faInfoCircle}
                    />
                  </Button>
                </Tooltip>
              </CardActions>
            </Card>
          </Grid>