<div className={"w-full py-6 text-white px-10 h-fit max-h-full " + className}>
               <h2 className="text-3xl font-bold">{title}</h2>
               {/* This div contains movies cards. I want to make here scrolling horizontally  */}
               {/* Keep in mind that while hovering on movie card movie card scale increase so it make nested vertical scroll that I want to fix */}
               <div
                    ref={categoryRef}
                    className="w-full flex flex-nowrap gap-x-3 overflow-x-scroll overflow-y-clip snap-x no-scroll-bar h-fit max-h-full "
               > 
                    {movies.map((movie) => (
                         <MovieCard key={movie.id} {...movie} />
                    ))}
               </div>
</div>

I want to fix the nested scroll in overflow Y but also saving that overflow X scroll cause movies appears in this div in horizontal view

I tried to put max height and min height but it not working