Dropdown clipped inside horizontally scrollable container

[fabriziocucci]

What’s the suggested approach in v5 for using dropdowns inside scrollable containers without them being clipped?

Minimal repro

<div className="flex flex-row gap-2 overflow-x-auto">
  <button className="btn btn-sm">Button1</button>
  <button className="btn btn-sm">Button2</button>
  <button className="btn btn-sm">Button3</button>

  <div className="dropdown dropdown-end">
    <div role="button" tabIndex={0} className="btn btn-sm">
      Open menu
    </div>
    <ul
      tabIndex={0}
      className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
    >
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
</div>

Expected behavior

The dropdown menu should open normally, extending outside of the parent if necessary.

Actual behavior

Because the parent container uses overflow-x-auto, the dropdown menu is clipped and not visible outside the scroll container.

[saadeghi]

In CSS when you add overflow in one direction, the other one becomes hidden.
This is expected CSS behavior at the moment unfortunately and it is indeed an annoying behavior with no direct solution.

Hopefully later on when Firefox and Safari start supporting CSS Anchor Positioning, we can use that for dropdown which will prevent this problem.

Currently workaround would be avoiding overflow-x when dropdown is needed or adding enough padding or empty space for it to be able to see the dropdown.

Let me know if you have a question.

[fabriziocucci]

Thanks for the prompt reply @saadeghi!

So, there is currently no way to keep the parent container scrollable and have the child dropdown work as intended, right?

[saadeghi]

A workaround would be providing enough padding on the bottom so the dropdown stays visible and the whole thing can scroll horizontally without being cropped.

Or not using overflow auto, and instead make the items wrap to next line.

Or make it overflow auto only in specific screen sizes and then showing the dropdown items in another place where it fits. For example if it's mobile, it can open a modal instead of a dropdown menu.