not able to overflow the div properly

hey folks I have this html

<Box display='flex' height={'calc(var(--vh, 1vh) * 100)'}>
    <NavbarLayout />
    <Main>
        <TaskGrid />
    </Main>
    <TodayTasksLayout />
</Box>

<Box display='flex' height={'calc(var(--vh, 1vh) * 100)'}>
    <NavbarLayout />
    <Main>
        <TaskGrid />
    </Main>
    <TodayTasksLayout />
</Box>

My problem is when the content in the div with name main overflows it looks like in the attached image so to solve that I tried setting overflow-y: auto on the main div but due to that the scrollbar comes is showing in the main div I want that scrollbar shows at the place shown in overflowing div image how do I do that

8 Replies

Monimolimnion•3y ago

You mean you want each individual task box to overflow if necessary?

Aditya KiradOP•3y ago

nope I want that scrollbar showing in the second image should be at the place of scrollbar in first image

Monimolimnion•3y ago

The scrollbar in your first image is your body scrollbar

Aditya KiradOP•3y ago

yeah i want that body scrollbar for my middle div in case it overflows

Chris Bolson•3y ago

Have you defined the height on your "main" element?

Aditya KiradOP•3y ago

nope

Chris Bolson•3y ago

If it doesn’t have a defined height it will automatically adjust to fit the contents which is what is causing your body scroll. I’d you give it a defined height it should show the scroll bar where you want it.

Aditya KiradOP•3y ago

tried giving defined height but not working

Gaming

Programming

not able to overflow the div properly

Did you find this page helpful?