After implementing the infinite scroll using the second method, I encountered an issue where the content I was displaying had overflow on width/x. I attempted to override the infinite scroll style with overflowX:visible, but unfortunately, it did not work.
<div id="scrollable-target" className="content flex flex-col items-start justify-center h-40 mt-10 flex-grow text-left max-w-[900px] mx-auto
overflow-y-auto overflow-x-visible" ref={diary}>
<InfiniteScroll
dataLength={posts.length}
next={getMorePost}
hasMore={hasMore}
loader={<div className=""><Stairs /></div>}
endMessage={<h4>Nothing more to show</h4>}
style={{
overflow: undefined,
height: undefined,
'-webkit-overflow-scrolling': undefined,
overflowX: 'visible',
overflowY: 'inherit'
}}
scrollableTarget="scrollable-target"
>
{posts.map((x, i) => (
<div key={i} className={`transition mt-3 animate-fade-in-up duration-500 ${activeDiary === x.uuid || activeDiary === null ? '' : 'opacity-50'} ${activeDiary === x.uuid ? 'scale-110' : 'scale-100'}`}>
<div className="flex flex-row justify-start items-center gap-1 hover:cursor-pointer flex-wrap" onClick={(e) => toogleBody(e, x.uuid)}>
<h3 className="font-bold noselect text-sm sm:text-base">{x.title}</h3>
<div className="flex flex-row justify-start items-center gap-1 text-xs md:text-base mt-0">
<span className="text-gray-600">@lurifos ·</span>
<span>{parseDate(x.timecreated)}</span>
<div className="transition duration-500 text-lg" id={`arrow-${x.uuid}`}>
<MdKeyboardArrowDown />
</div>
</div>
</div>
<div id={`body-${x.uuid}`} className="transition-max-height duration-500 text-gray-600 slide overflow-hidden sm:overflow-clip text-sm sm:text-base">
{truncate(x.body, 256)}
<a href={'/diary/' + x.uuid} className="text-sm ml-1 text-blue-500" target='_blank' rel="noreferrer">{x.body.length > 256 ? "Read More" : ''}
</a>
</div>
</div>
))}
</InfiniteScroll>
</div>
https://i.sstatic.net/sRD9H.png
Note: I set the height small because I haven't generated enough data to trigger the overflow-scroll. EDIT: Upon further investigation, it seems like the issue lies with srollable-target. I removed the overflow class and replaced it with overflow-visible, which resolved the problem temporarily. However, when adding overflow-y-auto, the issue resurfaced.