When parent container has overflow set, popper positioning screws up

[danchristian]

When the parent container has overflow: auto or overflow: scroll set, the placement of the poppers is incorrect.

https://jsfiddle.net/ec4o2wt0/

How can I fix this?

I see a similar issue here perhaps floating-ui/floating-ui#248

[danchristian]

After seeing this issue,, I have tried popper(trigger="click", boundaries-selector="viewport") but the problem still persists.

[danchristian]

After a search around, I saw a similar issue on tippy.js (which uses popper.js) and worked out how to solve this:

popper(trigger="click", :options="{ modifiers: { preventOverflow: {escapeWithReference: true}}}")

[RobinCK]

@danchristian thanks

[voodoocode]

I want to add up on @danchristian solution, by noting that I only got that working by also using:
:append-to-body="true"