React MUI: Matching the heights of two grid sections

Using MUI have two separate grids next to each other, both taking up 50% of a larger grid.

As seen in the image below, I am having a hard time matching the heights of the two sections. I would like the smaller grid items (cards) to dynamically fill in the height of the left portion and match the height of the right portion.

How is this possible with Mui?

Here is my current code:

import React from "react";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Chart from "./testChart.js";

function GeneralDashboard(props) {
  const defaultStats = [
    { name: "Opportunitys Entered", value: 102 },
    { name: "Wins Reported", value: 23 },
    { name: "Win Rate", value: "60%" },
    { name: "Total Revenue", value: "$20m" },
  ];
  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <Grid
          container
          spacing={{ xs: 1, sm: 2, lg: 2 }}
          columns={{ xs: 8, sm: 8, md: 8, lg: 8 }}
        >
          <Grid item xs={8} sm={8} md={4} lg={4}>
            <Box sx={{ flexGrow: 1 }}>
              <Grid
                container
                spacing={{ xs: 1, sm: 2, lg: 2 }}
                columns={{ xs: 4, sm: 4, md: 8, lg: 8 }}
              >
                {defaultStats.map((stat) => {
                  return (
                    <>
                      <Grid item xs={2} sm={4} md={4}>
                        <Card>
                          <CardContent>
                            <Typography
                              sx={{ fontSize: 14 }}
                              color="text.secondary"
                              gutterBottom
                            >
                              {stat.name}
                            </Typography>
                            <Typography variant="h3" component="div">
                              {stat.value}
                            </Typography>
                          </CardContent>
                        </Card>
                      </Grid>
                    </>
                  );
                })}
              </Grid>
            </Box>
          </Grid>
          <Grid item xs={8} sm={8} md={4} lg={4}>
            <Box sx={{ flexGrow: 1 }}>
              <Grid container spacing={{ xs: 1, sm: 1, lg: 1 }}>
                <Grid item xs={12}>
                  <Card>
                    <CardContent>
                      <Typography
                        sx={{ fontSize: 14 }}
                        color="text.secondary"
                        gutterBottom
                      >
                        <h5>
                          <span>
                            <span className="fw-semi-bold">Re-entry</span>{" "}
                            timing by industry
                          </span>
                        </h5>
                      </Typography>
                      <Chart />
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
            </Box>
          </Grid>
        </Grid>
      </Box>
    </>
  );
}

Answer

You need to set the height of all containers and the item to 100%:

<Box sx={{ flexGrow: 1, height: "100%" /* <----------------------- (1) */ }}>
  <Grid
    sx={{ height: "100%" /* <----------------------- (2) */ }}
    container
    spacing={{ xs: 1, sm: 2, lg: 2 }}
    columns={{ xs: 4, sm: 4, md: 8, lg: 8 }}
  >
    {defaultStats.map((stat) => {
      return (
        <>
          <Grid item xs={2} sm={4} md={4}>
            <Card sx={{ height: "100%" /* <----------------------- (3) */ }}>