1

I have a tailwindcss component as defined below. The parent container is set position: relative, which houses a dropdown component. which is supposed to show on button hover.

Everthing works fine but the moment I put the dropdown inside a container with overflow set to auto. It seem as though the dropdown menu is constraint to the height of the contianer. In other the words the the dropdown adds scrolling instead of popping out.

How do I make is pop out of the container instead being constraint to the parent's height.

Link to code: tailwind playbook

<div class="h-20 overflow-y-auto">
  <div class="group relative inline-block">
    <button>show</button>
    <ul class="absolute hidden border p-5 group-hover:block">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
    </ul>
  </div>
</div>

enter image description here

Dickson Afful
  • 708
  • 1
  • 6
  • 20
  • 1
    Do you mean that you want your elements to show in a complete list rather than being hidden? if so you should remove `overflow-y-auto` from the parent container or replace it with `overflow-y-visible` – minasrc Jul 22 '22 at 15:54

0 Answers0