CODEWITHSUNDEEP
cssreactjsflexboxmaterial-uistyled-components
badAtHooks
badAtHooks

Reputation: 149

CSS overflow not working as expected and unable to scroll to bottom of div

My goal is to set up a layout with a sticky header and left sidebar, and non-sticky DashboardBody (the green-bordered box) that can be scrolled through (in which case the content at the top disappears "under" the sticky header). I'm using styled-components, and the two boxes under the header are wrapped in a BelowNavContainer that is using flexbox.

The component ProjectContainer encloses the entire view (including the header and sidebar as well). Since I only want a scrollbar on the DashboardBody part, I set overflow: auto for that and overflow: hidden for ProjectContainer. However this results in the user being unable to see the bottom of DashboardBody - the bottom of the scrollbar (with the downward pointing arrow) is not visible either.

If I set overflow: auto for ProjectContainer then an additional scrollbar is added, and I can scroll to the bottom of DashboardBody using these 2 scrollbars. But obviously, I only want one scrollbar.

What am I doing wrong and how can I fix this?

I've looked at related "overflow not working" questions. Their solutions did not work as I already do have a height value specified.

Working demo: https://codesandbox.io/s/overflow-woes-i4dww

Note: it seems like CodeSandbox itself adds a scrollbar to the view, so I think the outermost one can be ignored. With webpack-dev-server (from create-react-app) on my own machine, I have one fewer scrollbar than what CodeSandbox shows.

I expect DashboardBody to have a scrollbar that lets me scroll to the bottom of the div. I only want this component to have a scrollbar, i.e. the scrollbar should not start at the top of the screen alongside the header.

Currently, I can't seem to reach the bottom of its scrollbar without adding another scrollbar to its enclosing div, ProjectContainer.

Upvotes: 0

Views: 3322

Answers (2)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

The problem is with BelowNavContainer Component.

You've set its height to 100vh, but notice that there is header above it, so the total height of the full page now is :

header Height + 100vh(BelowNavContainer height).

and as you put thier parent component: ProjectContainer height to 100%, overflow: hidden, this will hide the bottom of the DashboardBody' component.

Solution:

to put height of BelowNavContainer as follows: height: calc(100vh - 100px)

as 100px:is the hieght of your header

you can see this wrking demo

Upvotes: 2

doutor
doutor

Reputation: 66

Your header has 100px height, and the content below has 100vh (means the entire screen). If you want to achieve the bottom without using another scrollbar, you should change the content height to: calc(100vh - 100px). Is it what you are looking for?

Upvotes: 1

Related Questions