I'm developing a web app using React + Material UI. I have three Box components (see the code that follows). Box 1 and Box 3 have fixed heights. How can I force Box 2 to occupy the remaining vertical space?

<Box id="1" sx={{height: "90vh"}}>
    <Box id="2">
        
    </Box>
    <Box id="3" sx={{height: "50px"}}>
        
    </Box>
</Box>