Material UI Grid and CSS Flex-Box causing the child to overflow the parent container [closed]

The following is the problem

Context: I have 5 components that I need to display such that 3 components are horizontally aligned followed by 4 and 5 which are vertically aligned.All these components will be within a container such that the height of components 1, 2, and 3 and the components 4 and 5 in the column will be the same.

How to achieve this as in the below sandbox I have implemented it and the components 1,2 and 3 seem to overflow the grid element.

Grid is a flexbox wrapper on the div element.

What i want ?I have highlighted the container and want it to stay contained.

I tried giving the outer most container denoted by tag in code to flexBox with a height.

I then gave align-item stretch to the grid container and the corresponding children so that i can take up entire height of the container.

However, it seems to not work and there is overflow ?

Can you please explain why is this happening and how should i go about fixing it ?

Here is the code sandbox link

import React, { useState } from "react";import ReactDOM from "react-dom";import {  Container,  Grid,  Paper,  Button,  Box,  Typography,} from "@material-ui/core";// These are the components that would be displayedconst DummyComponent1 = () => (<Box p={2} bgcolor="lightcoral" borderRadius={1} height="100%"><Typography variant="h6">Component 1</Typography><Typography>This is component 1.</Typography></Box>);const DummyComponent2 = () => (<Box p={2} bgcolor="lightseagreen" borderRadius={1} height="100%"><Typography variant="h6">Component 2</Typography><Typography>This is component 2.</Typography></Box>);const DummyComponent3 = () => (<Box p={2} bgcolor="lightskyblue" borderRadius={1} height="100%"><Typography variant="h6">Component 3</Typography><Typography>This is component 3.</Typography></Box>);const DummyComponent4 = () => (<Box p={2} bgcolor="lightgoldenrodyellow" borderRadius={1}><Typography variant="h6">Component 4</Typography><Typography>This is component 4.</Typography></Box>);const DummyComponent5 = () => (<Box p={2} bgcolor="lightpink" borderRadius={1}><Typography variant="h6">Component 5</Typography><Typography>This is component 5.</Typography></Box>);function App() {  const [btn, setbtn] = useState(true);  const onClickHandler = () => {    setbtn((prev) => !prev);  };  return (<Container      sx={{        height: "100vh",        display: "flex",        flexDirection: "row",      }}><Grid        container        direction="row"        sx={{          alignItems: "stretch",          height: "100%", // Grid container takes full height of parent          // "& > .MuiGrid-item": {          //   margin: "20px", // child is not accepting space          // },        }}><Grid          item          md={3}          sx={{            alignSelf: "stretch",            height: "100%", // Grid item takes full height          }}><DummyComponent1 /></Grid><Grid          item          md={3}          sx={{            height: "100%", // Grid item takes full height          }}><DummyComponent2 /></Grid><Grid          item          md={3}          sx={{            height: "100%", // Grid item takes full height          }}><DummyComponent3 /></Grid>        {btn && (<Grid            item            container            direction="column"            md={3}            sx={{              height: "100%",            }}><Grid              item              sx={{                height: "50%",                flexGrow: 1,              }}><DummyComponent4 /></Grid><Grid              item              sx={{                height: "50%",                flexGrow: 1,              }}><DummyComponent5 /></Grid></Grid>        )}</Grid><Button        variant="outlined"        onClick={onClickHandler}        sx={{          paddingTop: "12px",        }}>        Outlined</Button></Container>  );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);