材质的UI卡，如何在使其可点击的同时固定高度？

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>
));
}