overflowX:visible not working in react-infinite-scroll-component

Question

So I created, the infinite scroll with second method (the scrollable component is the parrent element) and the content I am displaying might have overflow on widht/x. I tried to overwrite the infinite scroll style with overflowX:visible, but it doesn't 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>

note: I set the height so small because I don't have enough data to trigger the overflow-scroll EDIT: I think the problem is in the srollable-target, I removed the overflow class and replace it with overflow-visible, and it's working. But when I add a overflow-y-auto the problem appears again.

Answer 1

I had the same problem, You can set your overflowX style to an InfiniteScroll container, like this:

<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 verflow-y-auto overflow-x-visible" ref={diary}>
   <div
      style={{
         overflowX: 'visible'
      }}   
   >
      <InfiniteScroll
         style={{ }}
      >
         {...props}
      </InfiniteScroll>
   </div>
</div>