I have a flex container in which I want to have another flex container which scrolls content when it is too large to fit the screen. This is what I have so far:

<Box
    sx={{
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'green',
    }}
>
    <Box sx={{ flex: 1, overflow: 'scroll', backgroundColor: 'orange' }}>
        ... // long list of content
    </Box>
</Box>

I have tried playing around with all parameters but it does not work. It always adds the browser default scrolling and content just grows downwards.