[SOLVED] In material ui version 5 Grid component not stretching

Issue

I am trying to stretch the Grid component when one of the Card component has extra text.

Please find the sample code here:

https://codesandbox.io/s/mediacard-demo-material-ui-forked-xpme4r?file=/demo.js:283-290

When i change the alignItems to "flex-end" or "center" it works.

But alignItems: "stretch" not working.

Using MUI Version5

Any suggestions would be helpful.

Solution

The Problem is Solved
I added the heights to the card and made it responsive
It Might be helpful to you

import React from "react";
import { Grid, Card } from "@mui/material";
         import CardActions from "@mui/material/CardActions";
         import CardContent from "@mui/material/CardContent";
         import { makeStyles } from "@mui/styles";
    
const useStyles = makeStyles((theme) => ({
           stretch: {
             height: "100%"
           }
         }));
         export default function MediaCard() {
           const classes = useStyles();
           return (
             <Grid container spacing={3} justify="space-between" alignItems="stretch">
               <Grid item xl={2} lg={2} md={6} xs={12}>
                 <Card className={classes.stretch}>
                   <CardContent>Card A</CardContent>
                   <CardActions>
                     Card A action // Card A actions // Card A actions //Card A actions// Card A actionsactions// Card A actionsactions// Card A actionsactions// Card A actions
                   </CardActions>
                 </Card>
               </Grid>
               <Grid item xl={2} lg={2} md={6} xs={12}>
                 <Card className={classes.stretch}>
                   <CardContent> Card B content</CardContent>
                   <CardActions> Card B actions</CardActions>
                 </Card>
               </Grid>
               <Grid item xl={2} lg={2} md={6} xs={12}>
                 <Card className={classes.stretch}>
                   <CardContent>Card B content</CardContent>
                   <CardActions> Card B actions</CardActions>
                 </Card>
               </Grid>
             </Grid>
           );
         }

Answered By – Aashay Shah

Answer Checked By – Mary Flores (BugsFixing Volunteer)