如何让这个带有溢出自动的子元素在父元素溢出隐藏时显示？

Question

Fiddle here

如您所见，我正在尝试创建全屏覆盖导航。我已将 body 高度设置为 200%，当叠加导航显示时，我将 body 设置为 overflow: hidden;.

我还将重要的覆盖导航属性设置为：

.flexbar .overlay-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150%;
    overflow: auto;
}

出于测试目的，我将高度设置为 150%，以防菜单项多于屏幕在较小屏幕上无法显示的可能性。我希望用户能够在覆盖导航中滚动，但出于某种原因我的 overflow: auto; 不工作？

Answer 1

我认为在长运行中，弄乱高度（150%、200%）会影响您的布局。我分叉了你的 JSFiddle，并将高度改回 100%。我还使用了 overflow-x: scroll，如果我正确理解你的问题，我认为它应该可以解决你的问题。

How do I get this child element with overflow auto to show when the parent is overflow hidden?