Can't set my grid card content to equal height

Question

I want all cards in my grid to have equal height. I've been trying for hours with chrome, testing various combinations but I can't achieve the desired result. I want the content part of the card (pink) to expand so that everything is in the same line.

Grid cells are perfect. But if I flex grow the card or set it to 100% height, it fills the grid item (which is shown in picture 1) with paper (picture 2). I did the same thing for all the children (especially the text area), but they won't expand.

Tried stretching, changing displays, heights etc. Want to avoid a fixed height (even dependent on viewport) or fixed max height at all costs. Any ideas?

Edit: Maybe it's worth mentioning that the closest I've gotten to the desired result is setting display: content at the CardActionArea sub-element. Card is exactly as I want it except that it pushes my text at the bottom.

Here's the code of my styles and my first card - I'll leave the comments in to show some of the things that have been tried and tested (some code is also irrelevant but I'll leave it in in case something sabotages what I'm trying to do):

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>

Answer 1

Tried to achieve wanted card behavior in a very simple way, I hope that would help:

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
    border: 4px solid #827d7d;
    border-radius: 5px;
    margin: 8px;
    display: flex;
    flex-direction: column;
}

.card_header {
  background-color: grey;
}

.card_content {
  background-color: yellow;
  height: 100%;
}

h1, p {
  margin: 0;
}

<div class="container">
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm different amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm different amount of content</p>
      <p>I'm different amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm different amount of content</p>
      <p>I'm different amount of content</p>
      <p>I'm different amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm different amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm different amount of content</p>
      <p>I'm different amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm different amount of content</p>
      <p>I'm different amount of content</p>
      <p>I'm different amount of content</p>
    </div>
  </div>
</div>

Answer 2

Found the culprit. It was the CardActionArea (a subcomponent of the card that make it clickable and contains the ripple effect of MUI).

The desired result is achieved only when this area has all of the following properties, so that the content fits into that area:

flexGrow: 1,
display: "flex",
flexDirection: "column",
alignItems: "stretch"

Thanks to everyone for discussing it, helped me approach the problem in a better way and started commenting out the sub-elements of the card one by one and found the problem. Cheers!

Answer 3

Make each card a flexbox and give the info panel a flex-grow: 1:

.grid{
   display:grid;
       grid-template-columns: 1fr 1fr;
}

.card {
    display: flex;
    flex-flow: column;
    margin-right: 10px;
}

.card img{
 width: 100%;
}

.card .info{
  background-color: pink;
  flex-grow: 1;
}

<div class="grid">
  <div class="card">
    <img src="http://placekitten.com/200/200" />
    <div class="info">
       <h1>Title</h1>
       <p>Text</p>
    </div>
  </div>
  <div class="card">
    <img src="http://placekitten.com/200/200" />
    <div class="info">
       <h1>Title</h1>
       <p>Text</p>
       <p>Text</p>
       <p>Text</p>
    </div>
  </div>

</div>