Div being hidden/cut off upon window resizing?

I am trying to make it so that by sidebar is overfills with a scroll bar when the screen is shrunk:

<RootStyle>
    <Authenticator />
    <DashboardNavbar onOpenSidebar={() => setOpen(false)} disabled />
    <BodyStyle>
        <ConsoleSettings
            navConfig={settingsConfig}
            sx={{
                overflow: 'auto',
                width: DRAWER_WIDTH,
            }}
        />
        <MainStyle>
            <Outlet />
        </MainStyle>
    </BodyStyle>
</RootStyle>

const RootStyle = styled('div')({
    display: 'flex',
    justifyContent: 'center',
    minHeight: '100%',
    overflow: 'auto',
});

const BodyStyle = styled('div')(({ theme }) => ({
    display: 'flex',
    justifyContent: 'center',
    width: '70%',
    minWidth: 1000,
    minHeight: '100%',
    paddingTop: APP_BAR_MOBILE + 24,
    paddingBottom: theme.spacing(10),
    overflow: 'auto',
    [theme.breakpoints.up('lg')]: {
        paddingTop: APP_BAR_DESKTOP + 24,
        paddingLeft: theme.spacing(10),
        paddingRight: theme.spacing(10),
    }
}));

const MainStyle = styled('div')(({ theme }) => ({
    display: 'flex',
    flexGrow: 1,
    overflow: 'auto',
    float: 'right',
    minHeight: '100%',
    paddingBottom: theme.spacing(10),
    [theme.breakpoints.up('lg')]: {
        paddingLeft: theme.spacing(4)
    }
}));

If the screen is large, it looks fine:

But if I shrink the screen, the sidebar gets cut off with no scroll bar:

I was under the impression that adding overflow: auto would fix the issue, but it doesn't seem to work in this case. Would someone be able to explain why?