Bootstrap dropdown clipped by overflow:hidden container, how to change the container?

Question

Using bootstrap, I have a dropdown menu(s) inside a div with overflow:hidden, which is needed to be like this. This caused the dro

Answer 1

All the answers mentioned here didn't work for me, so I found another workaround:

$('.dropdown').on('shown.bs.dropdown', function () {
    const dropdown = $(this);
    setTimeout(function () {
        dropdown.find('.dropdown-menu').css({'top': dropdown.offset().top - $(window).scrollTop(), 'left': dropdown.offset().left - $(window).scrollLeft(), 'position': 'fixed'});
    }, 1);
});

The timeout is necessary as the event handler is fired before bootstraps sets the CSS of the dropdown therefore overwriting it