Материал пользовательского интерфейса карты, как зафиксировать высоту, сделав ее кликабельной?

Question

Я хочу сделать всю карту кликабельной, но я не могу сделать так, чтобы мой макет оставался стабильным, он менялся в зависимости от длины содержимого. Кто-нибудь знает, как сделать фиксированную длину с моим изображением и содержимым, сохраняя при этом всю карту активируемой? это мой код.Как видите, мое изображение слегка скользит между двумя картами.он корректируется исходя из длины текста.Я хочу сделать все это одинакового размера.

const styles = {
card: {
maxWidth: 345,
minHeight: 300,
margin: '10px',
},
area: {
minWidth: 345,
minHeight: 345,
},
media: {
height: 140,
objectFit: 'cover',
},
};

function BlogPostList(props) {
const { classes, data } = props;
return data.map(current_data => (
<Card className={classes.card}>
  <CardActionArea className={classes.area}>
    <CardMedia
      className={classes.media}
      image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
      title={current_data['title']}
    />
    <CardContent>
      <Typography gutterBottom variant="h5" component="h2">
        {current_data['title']}
      </Typography>
      <Typography component="p">{current_data['description']}</Typography>
    </CardContent>
  </CardActionArea>
</Card>
));
}