I'm attempting to position the navigation bars, breadcrumb bar, table header, etc. as fixed elements on the screen, but keep the content in the center of the page scrollable.
When I set most of the elements as fixed, the content in the center does not scroll. If I set the nav bars as fixed, certain elements will scroll, and the table header and related elements will scroll behind the navigation bar instead of being fixed on the screen. I've tried a few different options without any luck with keeping the content scrollable.
Here is example code which demonstrates this issue (click the menu drop down and then Testing menu item): https://codesandbox.io/s/happy-shadow-843ufv
Is there a way to set the elements on the screen and enabling scrolling with the content? Does this require styles to be created for each element, or is it possible to set a style which will enable scrolling at the parent div level?