I am facing a perplexing problem with a nav element that always shows an empty scrollbar area, even when it is not required. Here is how it looks with all content displayed:
https://i.stack.imgur.com/PzeiP.png
This is how it appears when the window height is reduced and scrolling becomes necessary to view all content:
https://i.stack.imgur.com/yAQYr.png
And this is how it SHOULD actually look:
https://i.stack.imgur.com/LkKSJ.png
Below is the CSS for this element (written in React and containing some variables):
box-sizing: border-box;
background-color: ${Color.White};
border-radius: 8px;
height: calc(100vh - ${heightCorrection});
padding: 0 16px;
text-align: left;
overflow: scroll;
width: ${width};
display: flex;
flex-flow: column nowrap;
> header,
footer {
padding-left: 16px;
}
To create the third screenshot, I changed overflow: scroll to overflow: hidden, but then I couldn't scroll when needed, which is essential.
It's worth noting that most users have not been able to reproduce this issue. Despite having a standard setup (latest version of Chrome on MacOS), others with similar configurations do not see the empty scrollbar area. Even a skilled front-end developer could not replicate this problem. Therefore, I am reaching out here to see if anyone has any insights or solutions.