Überlauf-Y funktioniert nicht, während Höhe

Question

angegeben

ich auf ein neues Menü zu arbeiten und ich versuche, meine Inhalte in einem Setup wie diese zu haben:

div with position fixed, defined height and overflow hidden 
    div with position relative, overflow Y auto and defined height bigger than parent 
    /div 
/div 

hier ist mein [bearbeitet] jsfiddle:

https://jsfiddle.net/bp9qdfb9/

Answer 1

der Überlauf ist an dem Behälter des Elements zugeordnet werden, überläuft:

.wrapper { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.wrapper > .container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    overflow-y: auto; 
 
} 
 

 
.wrapper > .container > .page { 
 
    display: block; 
 
    position: relative; 
 
    /* overflow-y: auto; */ 
 
    width: 100%; 
 
    height: 1500px; 
 
    background-color: blue; 
 
} 
 

 
.wrapper > .container > .page > .wrap-in { 
 
    display: inline-block; 
 
    width: 80%; 
 
    margin-top: 50px; 
 
    padding-bottom: 50px; 
 
    background-color: #ffffff; 
 
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04); 
 
    -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04); 
 
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04); 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="page"> 
 
     <div class="wrap-in"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>