我如何通过溢出自动获取此子元素以显示父元素何时被隐藏？

Question

Fiddle here

As you can see I'm trying to create a full screen overlay navigation. I have set the body height to 200%, and when the overlay nav shows I set the body to overflow: hidden; .

I've also set the important overlay navigation properties to:

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

I set the height 150% for test purposes on the off-chance that there are more menu items than the screen can show on smaller screens. I want the user to be able to scroll within the overlay navigation, but for some reason my overflow: auto; isn't working?

Answer 1

I think in the long run, messing with height (150%, 200%) is going to affect your layout. I forked your JSFiddle, and changed the heights back to 100%. I also used overflow-x: scroll , which I think should solve your issue if I am understanding your question correctly.

Fiddle: https://jsfiddle.net/52gsf85c/