When using overflow-y-auto on the container, elements that are supposed to overflow outside the container boundaries are being clipped, making them invisible. Removing overflow-y-auto fixes the issue, but the desired vertical scroll functionality is lost.

<div className="flex justify-between max-h-screen">
   {info && <Info {...info} />}
   <ul className="flex flex-col pt-3 overflow-y-auto">
      {songs && songs.map((song, i) => (
         <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
       ))}
</ul>
</div>

With overflow-y-auto:

Without overflow-y-auto:

When using overflow-y-auto on the container, elements that are supposed to overflow outside the container boundaries are being clipped, making them invisible. Removing overflow-y-auto fixes the issue, but the desired vertical scroll functionality is lost.

<div className="flex justify-between max-h-screen">
   {info && <Info {...info} />}
   <ul className="flex flex-col pt-3 overflow-y-auto">
      {songs && songs.map((song, i) => (
         <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
       ))}
</ul>
</div>

With overflow-y-auto:

Without overflow-y-auto:

• css
• tailwind-css

• Need a reproduction. – rozsazoltan Commented yesterday

2 Answers 2

So, I was moving cards by adding the -ml class. The fix was to use mr instead of -ml on a card and then align all the cards to the end using items-end. Have no clue why -ml doesn't work.

useEffect(() => {
   if (info) {
      const song = document.getElementById(info?.local.id)
      if (song) {
         if (currentSong !== song) {
            if (currentSong) {
               currentSong.className = tw(currentSong.className, 'mr-0 bg-song -mt-3 mb-0');
               }
               song.className = tw(song.className, 'mr-24 bg-song-select -mt-1 mb-2');
               setCurrentSong(song);
         }
      }
   }
}, [info]);

return (
   <div className="flex justify-between max-h-screen">
      {info && <Info {...info} />}
      <ul className="flex flex-col pt-3 overflow-y-auto items-end">
         {songs && songs.map((song, i) => (
            <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
         ))}
      </ul>
   </div>
)

Solution 1: Use overflow-y-visible on the Parent and overflow-y-auto on the Child

<div className="flex justify-between max-h-screen">
  {info && <Info {...info} />}
  <div className="flex flex-col pt-3 overflow-y-visible">
    <ul className="overflow-y-auto">
      {songs && songs.map((song, i) => (
        <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
      ))}
    </ul>
  </div>
</div>

Solution 2: use clip-path or transform to allow content to overflow visually without being clipped.

css

.overflow-visible {
  clip-path: inset(0 0 0 0);
}

js

<div className="flex justify-between max-h-screen">
  {info && <Info {...info} />}
  <ul className="flex flex-col pt-3 overflow-y-auto overflow-visible">
    {songs && songs.map((song, i) => (
      <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
    ))}
  </ul>
</div>