MUI Grid container height increases as the height of Card increases

I have an MUI Grid container and one of the Grid items have a Card in it. As the text inside the card increases, the height of the Grid too increases. This is usual, but I want the height of all the components to be the same. And if the content inside the card exceeds the height, I want it to overflow with scroll property (only for the card).

Here is my container element

<Grid container p={3} alignItems={"center"} spacing={2} maxHeight={"100%"}>

Here’s my Card element

<Grid item md={8} textAlign={"center"} xs={12}>
                  <Box>
                    {blogTitle === "" ? (
                      <Typography variant="h3" color={"info.main"}>
                        Select a blog to preview
                      </Typography>
                    ) : (
                      <Card sx={{ height: "100%", overflow: "auto" }}>
                        <CardHeader title={blogTitle} />
                        <img src={blogImage} width={500} alt={blogTitle} />
                        <CardContent>{blogDesc}</CardContent>
                      </Card>
                    )}
                  </Box>
                </Grid>