<div className="col-span-3 h-screen overflow-y-scroll ">
<ul className="m-5">
<li className="flex items-center mb-4">
<FontAwesomeIcon
icon={faRss}
className="m-2"
color="black"
size="lg"
/>
<span className="ml-3">Feed</span>
</li>
<li className="flex items-center mb-4">
<FontAwesomeIcon
icon={faCommentDots}
className="m-2"
color="black"
size="lg"
/>
<span className="ml-3">Comments</span>
</li>
...
<button className="bg-gray-200 border-none p-2 rounded">
Show More
</button>
</ul>
<hr className="m-2" />
<ul className="">
<li className="flex m-4 items-center">
<img src={one} />
<span className="ml-2">Jane Doe</span>
</li>
...
</ul>
</div>
https://i.sstatic.net/991pU.png
I want users to be able to scroll on the left side of the page to see their friends or anyone they follow. Enhancing user experience by adding a scroll option as the following list grows, allowing seamless navigation. However, there seems to be an issue where scrolling affects the entire page. How can I resolve this problem?