使用overflow-y-auto时防止阴影被剪切

Question

我在这里使用

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>

这是裁剪按钮的阴影：

顺风游乐场

防止这种情况的最佳方法是什么？

Answer 1

您设置最大高度。这意味着，在元素达到最大值之前，父级 div 的高度将与其内容所确定的高度一样。按钮的底部将标记高度的终点。阴影不包含在其中。添加一些填充物。

<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 md:pb-3">
  <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>

顺风游乐场