添加overflow-y-auto后元素被裁剪，移除则丢失垂直滚动功能

问题分析 #

给<ul>容器添加overflow-y-auto后，内部带有-mt-3负边距的<Card>元素被容器边界裁剪；移除该属性虽能正常显示溢出元素，但丢失垂直滚动功能。核心原因是overflow-y-auto会创建块格式化上下文（BFC），自动裁剪容器外的所有内容。

相关代码 #

<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>

效果对比 #

• 添加overflow-y-auto时：
• 移除overflow-y-auto时：

解决方案 #

方法1：分离滚动容器与溢出容器 #

通过在外层套一个overflow-visible的容器，让滚动逻辑由内层<ul>承担，外层容器允许元素溢出显示：

<div className="flex justify-between max-h-screen">
   {info && <Info {...info} />}
   {/* 外层容器：允许元素溢出 */}
   <div className="pt-3 overflow-visible">
      {/* 内层滚动容器：负责垂直滚动 */}
      <ul className="flex flex-col overflow-y-auto h-full">
         {songs && songs.map((song, i) => (
            <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
         ))}
      </ul>
   </div>
</div>

• 外层div设置overflow-visible，解除裁剪限制，同时保留原有的pt-3内边距；
• 内层<ul>添加h-full确保占满可用高度，维持overflow-y-auto实现垂直滚动。

方法2：调整滚动容器内边距容纳溢出 #

给<ul>增加顶部内边距，抵消Card的负边距，让溢出部分处于容器的内边距区域内（不会被裁剪）：

<div className="flex justify-between max-h-screen">
   {info && <Info {...info} />}
   {/* 顶部内边距由pt-3改为pt-6，容纳Card的-mt-3溢出 */}
   <ul className="flex flex-col pt-6 overflow-y-auto h-full">
      {songs && songs.map((song, i) => (
         <Card song={song} key={i} className='-mt-3 z-50' onClick={(props: SongData) => setInfo({...props})}></Card>
       ))}
</ul>
</div>

• 原pt-3是内容的基础内边距，额外增加3单位的内边距（即pt-6），刚好容纳Card向上溢出的部分；
• 同样给<ul>添加h-full确保滚动容器高度正确。

方法3：修正HTML结构并使用相对定位 #

<ul>的直接子元素必须是<li>，规范结构后给<li>设置相对定位，确保Card的溢出行为可控：

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

• 符合HTML语义化规范，同时<li>的相对定位能更好地控制Card的位置，避免布局错乱。

内容的提问来源于stack exchange，提问作者nutipa