The simplest way to make it work as expected is to assign a maximum height of viewport (height: 100vh) to your box component.

...
<Box component="main" 
sx={{ 
  flexGrow: 1,
  p: 3, 
  width: { sm: `calc(100% - ${drawerWidth}px)` }, 
  height: '100vh', 
  color: "#fff", 
  backgroundColor: "#212121" 
}}>
  <Toolbar />
  <Typography paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </Typography>
</Box>
...

Working example:

Note: your solutions won't work because of the following:

• height property with a percentage value will be inherited from the parent element since the parent element height by default is auto (which is inherited from its parent too), so it won't work as expected.
• flex property won't work as expected because the flex-direction will be row by default. But it also won't work if you change it to column since the maximum height of the container is auto and it follows the same rule as above.