I am attempting to achieve the same outcome as mentioned in this post, but within a MUI Grid container/item. However, I am facing an issue where I do not see a scrollbar and am unable to scroll. Could there be a problem with my implementation?
Here is the sandbox link
Thank you in advance for your help.
Update: It seems the links are functional now, so I am updating this post with the relevant links and code.
Links:
- Hide scroll bar, but while still being able to scroll
- https://codesandbox.io/p/sandbox/scrollable-grid-8jrc3n?file=%2Fsrc%2FScrollableGrid.tsx
Code:
const ScrollableGrid: React.FC = () => {
return (
<Grid
container
sx={{ overflow: "hidden", maxHeight: "300px", border: "1px solid green" }}
>
<Grid
item
xs={12}
sx={{
overflowY: "auto",
height: "100%",
boxSizing: "content-box",
border: "1px solid red",
margin: "10px",
}}
>
<div>Text 1</div>
<br />
<div>Text 2</div>
<br />
<div>Text 3</div>
<br />
<div>Text 4</div>
<br />
<div>Text 5</div>
<br />
<div>Text 6</div>
<br />
<div>Text 7</div>
<br />
<div>Text 8</div>
<br />
<div>Text 9</div>
<br />
<div>Text 10</div>
<br />
<div>Text 11</div>
<br />
<div>Text 12</div>
<br />
</Grid>
</Grid>
);
};