Are you saying that you can only anchor an element to one of its ancestors? Can CSS really not define positional relationships between siblings (I'm used to Apple's Auto Layout)? If so, couldn't you add an additional outer container that doesn't crop its contents to its bounds and anchor the dropdown to that?

The problem is when your dropdown component (D) is in a scrolling container (2) in the page (1).

    -1-----------
    |           |
    |  -2---    |
    |  | D |    | 
    |  -----    |
    |           |
    -------------

If you attach the dropdown options to the inner container (2), they are cropped.

If you attach the dropdown options to the outer container (1), they don't scroll with the rest of their component (D).

----

Non-native dropdowns in general are handicapped.

For Windows/MacOS/Linux, native dropdowns can exceed the bounds of even the OS window. There is no CSS equivalent of this behavior.