Yes, this is a bad UI mistake and makes it very hard for people to use properly. Indeed you have to scroll to the right before the inner scrollbar is revealed so that you can scroll downwards.
When you use
vw units (
100vw) then that includes a scroll bar width and makes your inner element too wide too fit. In most cases depending on situation you can omit the width or use a 100% width.
You also have too many fixed 100vh heights for nested elements resulting in too many scrollbars. You really only want to scroll with the main viewport vertical scrollbar and also eliminate all horizontal scrollbars (generally not by hiding the overflow but by controlling the content properly so that it doesn’t overflow).
Also because you use 100vh height on your mainbox you immediately get a vertical scrollbar when there is no content because you already have a header above that mainbox that already takes up some of the height of the viewport. Your mainbox then goes 100vh from where it starts resulting in the end of mainbox residing a distance under the viewport.
You need to construct it so that the header and mainbox are part of the same flexbox element that resides in a min-height:100vh parent and that allows vertical scrolling back in the hands of the main viewport scrollbar.