Estoy desarrollando una aplicación web usando React + Material UI. Tengo tres componentes Box (ver el código que sigue). Box 1 y Box 3 tienen alturas fijas. ¿Cómo puedo obligar a Box 2 a ocupar el espacio vertical restante?

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