如何在容器外部显示导航栏下拉菜单？

Question

因此在出现此问题之前，我一直在努力使导航栏在展开时在较小的屏幕上滚动。链接：responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll

使用该问题的答案，我可以使导航栏滚动，但是随后我遇到了一个新问题。单击导航栏链接时，弹出的下拉菜单将保留在导航栏容器中，并且可以滚动导航栏。

说明（在此情况下为OLE下拉菜单）的图片：

这是用于使折叠的导航栏可滚动的CSS。

.fixed-top .navbar-collapse {
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
}

导航栏折叠时没有问题，它可以正常显示下拉菜单并滚动。但是，当未在大屏幕上折叠时，如何使下拉菜单显示在导航栏容器之外？

这是我的JSFiddle解决此问题：https://jsfiddle.net/suhaib47/7b58o0d3/3/
注意：使结果视口足够宽，以使导航栏可以完全显示。单击OLE下拉菜单，然后您必须向下滚动才能看到下拉菜单。

---

当我在容器外部显示下拉菜单时，无法在较小的屏幕上滚动菜单。可以滚动菜单时，我无法获得下拉菜单显示在导航容器之外。

如何使下拉菜单显示在导航栏容器之外？同时，我希望在较小的屏幕上展开时，响应式导航栏可滚动。

我发现了一个类似的问题，但无法解决它：The navbar dropdown menu does not beyond the container

Answer 1

希望有一种解决方案，而不必使用媒体查询。不过，我确实能够使用媒体查询解决此问题。

@media only screen and (max-height: 450px) {
    .fixed-top .navbar-collapse {
        max-height: calc(100vh - 4.5em);
        overflow-y: auto;
    }
}

这种方式可以在需要时根据显示大小/方向（即，折叠导航栏菜单时）进行滚动。