Making child element fill to the height of the parent container React MUI

Question

I am trying to build a React Dashboard with MUI. Its with an AppBar and a drawer and the content area is a box (Please correct anything wrong box with specified spec is a perfect approach)..

But the problem I am facing is I cant make the container placeholder which is the Box itself to stretch its height to the full height of the page.

Here is my tsx

export default function RootContainer() {
  const [open, setOpen] = React.useState(false);
  const title="Manage Recipes";
  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };
  const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  }));
  const drawerWidth = 240;

const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
  open?: boolean;
}>(({ theme, open }) => ({
  flexGrow: 1,
  padding: theme.spacing(3),
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  marginLeft: `-${drawerWidth}px`,
  ...(open && {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  }),
}));

  return (
    <Box sx={{ display: 'flex', bgcolor:"silver",height:"100vh" }}>
      <CssBaseline />
      <AppBar open={open} onDrawerOpen={handleDrawerOpen}  />
      <Drawer open={open} onDrawerClose={handleDrawerClose} />
      <Main open={open} >
        <DrawerHeader />
        <Container maxWidth="xl">
        <h2>{title}</h2>
        <Paper elevation={1} sx={{bgcolor:"#f7f9ff", height:"100%"}}>
          <ManageRecipe />
        </Paper>
             
</Container>
      </Main>
     

    </Box>
  );
}

How can I achieve that to get full height (not full width)

*****Update Based on Answer

Based on the answer I have updated the page and the parent works fine now. It stretches to its full size without scroll.

But the two child elements causing some trouble as it still not full height.

So I updated the child container like this

    <Container  maxWidth="xl" sx={{margin:"20", bgcolor:"red", height:1}}  >
      <h2>{title}</h2>
      <Paper elevation={1} sx={{bgcolor:"#f7f9ff", height:1/2}}>
        <ManageRecipe />
      </Paper>
         
    </Container>

Now it looks like the child container bleeds out of the parent like this I was expecting the Container stay within the parent box with a bottom padding of 20px. But it doesnt.. PLease help

Answer 1

In your global index.css, make your parent nodes stretch in y-axis, by having these styles:

body: { height: 100vh; }

html,
#root,
.App {
  height: 100%;
}

Besides

flex-direction in react-apps is row by default, so update your Box-styling to :

<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    bgcolor: 'silver',
    height: '100%', // <---here
  }}
>
  {/** ... */}
</Box>