When testing the simplified version in the Browser at https://codesandbox.io/s/competent-bassi-yjtoj, everything worked as expected.
However, in my project where I'm utilizing Electron, React, MUI, and plain CSS, I encountered an issue that I'm not sure which component is causing. It seems like the problem might be related to incorrect CSS or Flexbox code implementation.
To see the issue in action, you can watch the video demonstration here: https://youtu.be/ym9Bhgexycs
The problem arises when scrolling to the bottom of the inner container, which then causes the main container to take over the scroll, moving to the bottom of the outer container and not the intended bottom of the inner one.
I've tried various combinations, such as disabling the overflow of the outer container and setting it to "hidden," while setting the inner container to "auto" scrolling. This setup is supposed to allow scrolling only within the inner container, but the scroll bar disappears, and I can't reach the bottom of the inner container.
Despite ensuring that the outer container has the correct height and does not overflow the status bar or footer, the inner container still overshoots the status bar.
In my attempts to resolve the issue, I even disabled all window-related options in Electron, to no avail.
While it's challenging to provide a code demo illustrating the problem, the key parts related to the issue are the global and component styles shown in the video.
Thank you for looking into this matter.
UPDATE
The only temporary fix I've discovered is setting the height of "subContainer" using height: calc(100vh - 35px), although I'm unsure where the 35px measurement is coming from. I'm seeking a permanent solution that doesn't rely on a fixed pixel size, or at least an understanding of what is causing this discrepancy.