My objective is to create a layout featuring a sticky header and left sidebar, with a non-sticky DashboardBody (the green-bordered box) that can be scrolled through. When scrolling, I want the content at the top to disappear "under" the sticky header. The implementation involves styled-components, where the two boxes under the header are enclosed in a BelowNavContainer that utilizes flexbox.
The component ProjectContainer encompasses the entire view, including the header and sidebar. To ensure a scrollbar only appears on the DashboardBody section, I have set overflow: auto for it and overflow: hidden for the ProjectContainer. However, this approach prevents users from seeing the bottom of the DashboardBody, as well as the downward arrow on the scrollbar.
When attempting to resolve this issue by setting overflow: auto for the ProjectContainer, an unwanted extra scrollbar appears. While this allows me to reach the bottom of the DashboardBody, having dual scrollbars is not ideal.
I am seeking guidance on correcting this problem and achieving a single scrollbar solution. Despite specifying a height value, existing solutions related to overflow problems have not proved effective.
You can view a working demo here: https://codesandbox.io/s/overflow-woes-i4dww
Please note that CodeSandbox itself adds a scrollbar to the view, which may skew the appearance. When using webpack-dev-server on my local machine (via create-react-app), there is one less scrollbar than displayed in CodeSandbox.
Ultimately, I anticipate the DashboardBody to feature a scrollbar enabling users to scroll to the bottom of the div without requiring an additional scrollbar in its parent container, ProjectContainer.
Despite efforts, I am currently unable to access the bottom of the scrollbar within the DashboardBody without introducing another scrollbar to the enclosing ProjectContainer.