Big dropdowns are unusable when used inside an `overflow:scroll` container, due to being constrained inside it

Created by: ronjouch

Problem

When using a Bootstrap (4.0.0beta) Dropdown in an element that is a child of an overflow:scroll element, the dropdown is "stuck" inside the container, making it unusable if the dropdown contents are too big horizontally/vertically:

Contrarily, a vanilla HTML <select> will merrily bleed out of the overflow:scroll element as necessary:

See demo at JSFiddle/ronj/t6z6Lnfb.

Use case

A few words on the use case justifying this combination, as shown in the JSFiddle which mimics a webapp I'm working on:

In the left sidebar live a set of filters. It may contain several filters that will consume undetermined vertical space, thus lives in an overflow-y:scroll div. Each filter has a dropdown which lets users modify filter options.
In the right pane lives the content, filtered by the filters in the left sidebar.

→ As a user,

I do need that overflow-y:scroll sidebar scrolling behavior (because the list of filters is of undetermined and potentially large height, depending on the number of filters)
But filter dropdowns (which can be large, both in width due to length of options and height due to count of options) should be able "escape out of" / not be constrained by the sidebar.

And as shown in the demo/screenshots, vanilla HTML <select> don't suffer from this problem, but it's not always practical/possible to revert back to using them, e.g. due to using features specific to Bootstrap Dropdown, or for consistent styling.

Details

Bootstrap version: 4.0.0-beta

OS/Browser: Ubuntu 16.04.3 / {Chrome 63, Firefox 58}

This issue is a follow-up to SO / Letting a bootstrap b-dropdown escape out of an overflow:scroll container, but noticing regular <select> are not affected, it starts to look like a bug, thus this issue. Sorry for the noise if I'm missing something obvious / if there's a workaround / if this is a known problem tracked in an existing issue.

Thanks 🙂.