Bootstrap 5 dropdown only active above parent element

I have a Bootstrap 5 dropdown menu within a div. Clicking the icon causes the dropdown to appear, but only those dropdown options that overlap the parent div are able to be hovered/clicked.

In the screenshot below, the 'Action' option works correctly (as it overlaps the blue parent div), but hovering over either 'Another action' or 'Something else here' does nothing and clicking them just closes the menu.

I suspect the issue is the boundary option described here. I don't fully understand either the Bootstrap or the Popper documentation for this, but I assume I need to set that value to some sort of container div (or even body).

The Bootstrap documentation says that can only be done via javascript (not via data attributes), so I added this code:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
      return new bootstrap.Dropdown(dropdownToggleEl, {
        boundary: document.querySelector('#planContainer')
      })
    })

However, this does not appear to make any difference. It also makes no difference if I set boundary: document.getElementsByTagName("BODY")[0].

Any suggestions for where I'm going wrong would be greatly appreciated.

from Bootstrap 5 dropdown only active above parent element