如何正确溢出顺风下拉菜单？

Question

I am trying to make the dropdown on the right overflow so that it is completely visible. I do not want to make the table bigger, I want the dropdown to be bigger than the table. I tried multiple different things with overflow and absolute/relative positioning but failed. What classes do I need to change to make it work? I appreciate any inputs!

Tailwind playground for testing: https://play.tailwindcss.com/0iiSxy59aP

Cheers

Answer 1

Removing overflow-x-auto in line 3 and overflow-hidden in line 5 fixed it!

Answer 2

The accepted answer solves the problem. But there are cases when we actually need an overflow.

In such a scenario, we need to remove the current relative-absolute approach and can make use of this library

Setup useFloating Hook

import { useFloating, shift } from "@floating-ui/react-dom";
   
const { x, y, reference, floating, strategy } = useFloating({
    placement: "bottom-start",
    middleware: [shift()],
  });

add reference ref in the button which triggers dropdown

<button ref={reference} type="button""> Options </button>

add floating ref in the div which was previously made absolute

 <div ref={floating}
          style={{
            position: strategy,
            top: y ?? "",
            left: x ?? "",
          }}> </div>