Scrollable responsive content between components

Question

I am trying to make a mobile responsive terms of service page that has a title, content and two buttons. The requirements are:

• Components must not exceed 100% of the viewport so the content is scrollable
• The Buttons are sticky (bottom)
• If the content is short, it has to be just below the title and not in the middle
• The page is mobile first friendly (landscape and portrait)

I have done most of it. Using the device toolbar, I am able to view it in mobile (landscape and portrait). The issue is, if toggling to landscape, the components goes beyond 100% of the height. I have tried using flexGrow but it doesn't seem to work so my workaround for now is to specify the height which is not ideal to make it responsive.

Reference: div with 3 rows and scrollable content at the middle

Here is a self-contained sample: https://stackblitz.com/edit/react-em99kh?file=src/App.js

App.js

const App = () => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        height: '100vh',
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            alignContent: 'center',
            mb: 3,
            mt: 3,
          }}
        >
          <Typography variant="h3">{'Terms of Service'}</Typography>
        </Box>
        <Box
          sx={{
            display: 'flex',
            overflow: 'scroll',
            //Don't want to specify height
            height: '70vh',
            //flexgrow does nothing even if height is removed
            flexGrow: 1,
          }}
        >
          <Typography variant="body1">{data()}</Typography>
        </Box>
      </Box>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          mb: 3,
          mt: 3,
        }}
      >
        <Button
          id="decline-btn"
          color="primary"
          variant="outlined"
          sx={{
            borderRadius: 16,
            width: '47%',
            height: '50px',
          }}
        >
          {'Decline'}
        </Button>
        <Button
          id="accept-btn"
          color="primary"
          variant="contained"
          sx={{
            borderRadius: 16,
            width: '47%',
            height: '50px',
          }}
        >
          {'Accept'}
        </Button>
      </Box>
    </Box>
  );
};

export default App;