I have an HTML template that uses Tailwind CSS and DaisyUI. Here is the code snippet:

<div class="flex h-32 w-48 items-center overflow-y-scroll">
  <span class="overflow-hidden truncate whitespace-nowrap p-4">Apple</span>
  <details class="dropdown m-4">
    <summary class="btn m-1">...</summary>
    <ul class="dropdown-content menu z-[2] w-52 rounded-box bg-base-200 p-2">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </details>
</div>

The issue I’m encountering is that when I click the button to show the dropdown menu, a scrollbar appears in the parent container. I want to prevent the parent container from showing the scrollbar when the dropdown is displayed. How can I achieve this?

Tailwind Playground Link: https://play.tailwindcss.com/K6ruW2ajJr

Any help on resolving this issue would be greatly appreciated!

What I’ve Tried:

• I have tried adjusting the z-index of the dropdown menu.
• I have attempted to change the overflow properties of the parent container.

Additional Information:

• I’m using Tailwind CSS and DaisyUI.
• The dropdown should appear without causing the parent container to scroll.