使用overflow-y-auto时如何避免按钮阴影被裁剪？

我给容器添加了overflow-y-auto属性，用来在条目过多、浏览器垂直缩小时实现滚动效果：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="border-border flex max-h-[calc(100vh-7.5rem)] w-full flex-col items-start justify-start gap-0 overflow-y-auto rounded border p-3 md:max-w-64 md:border-none md:p-0">
  <span>Item 1</span>
  <span>Item 2</span>
  <button class="border-border ring-foreground text-foreground bg-secondary hover:shadow-dark flex h-10 w-full items-center justify-center gap-2 text-nowrap rounded border px-4 py-2 text-sm font-medium shadow ring-offset-2 focus:outline-none focus-visible:ring-2 md:w-auto">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-folder-plus h-4 w-4 shrink-0">
      <path d="M12 19h-7a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v3.5"></path>
      <path d="M16 19h6"></path>
      <path d="M19 16v6"></path>
    </svg>
    Create category
  </button>
</div>

但这导致按钮的阴影被裁剪，效果如下：

最佳解决方法 #

方法1：给滚动容器增加底部内边距

给带有overflow-y-auto的容器添加额外的底部内边距，预留出阴影的显示空间，避免被容器边缘裁剪。比如将原容器的p-3调整为p-3 pb-5（可根据阴影大小灵活调整内边距数值）：

<div class="border-border flex max-h-[calc(100vh-7.5rem)] w-full flex-col items-start justify-start gap-0 overflow-y-auto rounded border p-3 pb-5 md:max-w-64 md:border-none md:p-0">
  <!-- 内部元素保持不变 -->
</div>

方法2：将按钮移出滚动容器

如果按钮是固定在底部的操作按钮，不需要跟随列表滚动，直接把按钮放到滚动容器外部单独布局，这样阴影就不会被滚动容器的裁剪规则影响：

<!-- 外层容器 -->
<div class="border-border md:max-w-64">
  <!-- 滚动列表容器 -->
  <div class="flex max-h-[calc(100vh-12.5rem)] w-full flex-col items-start justify-start gap-0 overflow-y-auto rounded border p-3 md:border-none md:p-0">
    <span>Item 1</span>
    <span>Item 2</span>
    <!-- 更多列表项 -->
  </div>
  <!-- 按钮放在滚动容器外 -->
  <button class="border-border ring-foreground text-foreground bg-secondary hover:shadow-dark flex h-10 w-full items-center justify-center gap-2 text-nowrap rounded border px-4 py-2 text-sm font-medium shadow ring-offset-2 focus:outline-none focus-visible:ring-2 md:w-auto">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-folder-plus h-4 w-4 shrink-0">
      <path d="M12 19h-7a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v3.5"></path>
      <path d="M16 19h6"></path>
      <path d="M19 16v6"></path>
    </svg>
    Create category
  </button>
</div>

方法3：使用自定义clip-path（小众场景可选）

通过clip-path替代overflow的裁剪逻辑，让阴影可以正常显示。需要在Tailwind中添加自定义工具类，且手动匹配容器圆角：

<div class="border-border flex max-h-[calc(100vh-7.5rem)] w-full flex-col items-start justify-start gap-0 overflow-y-auto rounded border p-3 clip-path-inset-rounded md:max-w-64 md:border-none md:p-0">
  <!-- 内部元素保持不变 -->
</div>

同时在Tailwind配置中添加：

tailwind.config = {
  theme: {
    extend: {
      clipPath: {
        'inset-rounded': 'inset(0 0 0 0 round 0.5rem)', // 对应rounded类的圆角大小
      },
    },
  },
  plugins: [require('tailwindcss-clip-path')],
}

推荐优先使用方法1或方法2，方法1实现简单，方法2更符合固定操作按钮的布局逻辑。

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