In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows:
<div>
<Grid container direction="row" spacing={1}>
<Grid item xs={3}>
<Grid container direction="column" style={{padding:"2em"}}>
// content goes here
</Grid>
</Grid>
<Grid item xs={9} style={{padding:"1em", overflow: "hidden"}}>
<Grid container direction="row" style={{overflow:"auto", maxHeight:"40%"}}>
{searchResultElements}
{searchHint}
</Grid>
</Grid>
</Grid>
</div>
The length of searchResultElements can vary. When there are many elements, a scrollbar appears within the inner-most grid-container. However, an additional scrollbar appears across the entire page.
Upon inspecting the elements using Chrome's developer tools, it is evident that the "invisible" elements in the list are causing the need for an outer scrollbar. Refer to the image below.
In the image, the green scrollbar is desired, while the grey one needs to be eliminated. The purple hatched items represent elements inside the grid container that create the vertical space requiring the grey scrollbar. These are only highlighted when hovered over.
Is there a way to prevent this issue and retain only the inner scrollbar?