I encountered a problem with scrolling the modal window. Let's start at the beginning: the site has a button for filters. The window for filters is designed as a modal window. It contains 4 elements with which you can filter (in my code they are FilterMethod, FilterStatusCode, FilterLink, FilterDate).

However, these four elements are in the form of a drop-down list. When these elements are in the closed state, there is no problem. But when in the open state, there are problems: the modal window goes off-screen; it doesn't scroll.

I have tried many ways, but have not been able to find a solution to my issue. I would like if when the dropdown lists are open, the modal window takes up more than 80% of the screen height, then it will start scrolling. Please tell me if this can be done.

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 300,
    bgcolor: 'background.paper',
    border: '1px solid #000',
    boxShadow: 24,
    p: 4,
};


export default function ModalWindow() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Button onClick={handleOpen}><FilterAltIcon/></Button>
            <Modal
                open={open}
                onClose={handleClose}
            >
                <Box sx={style}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Filters
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterMethod></FilterMethod>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterStatusCode></FilterStatusCode>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterLink></FilterLink>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterDate></FilterDate>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <ApplyCancelButtons></ApplyCancelButtons>
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}