My setup involves two Grid components, with one structured like this:
<Grid container alignItems="stretch" spacing={3}>
<Grid className="left-pane" item md={4} xs={12}>
<Navigation />
</Grid>
<Grid className="right-pane" item md={8} xs={12}>
<img src={Background} />
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
</Grid>
</Grid>;
I am trying to achieve a layout where the left-pane remains fixed while the right-pane is scrollable. However, when I fix the left-pane, it overlaps and shifts to the left. How can I implement this using Material UI React in such a way that the left pane stays fixed and the right pane remains scrollable? Any guidance on how to achieve this would be greatly appreciated.