어떻게하면 요소 오버플로를 만들 수 있습니까? 부모가 오버플로 된 경우 auto : hidden?

Question

바이올린 here

나는 그래서 그것을 만들려고하는 메뉴는 내가 아니라 몸의 메뉴를 닫을 때까지, 메뉴에서 스크롤 할 수 있습니다 100 % 이상 높이 인 경우.

body.menu-open { 
    overflow: hidden; 
} 

그리고 메뉴 스타일 :

.navbar .menu { 
    position: fixed; 
    width: 30%; 
    height: auto; 
    min-height: 150%; /* height greater than 100% */ 
    overflow: auto; 
    top: 50px; 
    left: -30%; 
    background-color: DeepSkyBlue; 
    transition: left 0.2s ease-in-out; 
} 

Answer 1

100%로 변경 min-height 메뉴에 100%와 max-height을 추가

.navbar .menu { 
    position: fixed; 
    width: 30%; 
    height: auto; 
    min-height: 100%; 
    max-height: 100%; 
    overflow: auto; 
    top: 50px; 
    left: -30%; 
    background-color: DeepSkyBlue; 
    transition: left 0.2s ease-in-out; 
} 

메뉴가 열려

나는 다음과 같은 적용

$('.navbar .fa-bars').on('click', function() { 
 
\t $('body').toggleClass('menu-open'); 
 
\t $('.navbar .menu').toggleClass('in'); 
 
});

body { 
 
    min-height: 100%; 
 
    height: 1000px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body.menu-open { 
 
    overflow: hidden; 
 
    
 
} 
 

 
.navbar { 
 
    height: 50px; 
 
    background-color: royalblue; 
 
    display: flex; 
 
    align-items: center; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
.navbar .fa-bars { 
 
    color: #fff; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
} 
 

 
.navbar .menu { 
 
    position: fixed; 
 
    width: 30%; 
 
    height: auto; 
 
    min-height: 100%; 
 
    max-height: 100%; 
 
    overflow: auto; 
 
    top: 50px; 
 
    left: -30%; 
 
    background-color: DeepSkyBlue; 
 
    transition: left 0.2s ease-in-out; 
 
} 
 

 

 
.navbar .menu.in { 
 
    left: 0; 
 
} 
 

 

 

 
.navbar .menu a { 
 
    color: #fdfdfd; 
 
    text-decoration: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"> 
 
    <div class="menu-icon"> 
 
    <i class="fa fa-bars fa-2x"></i> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul class="nav"> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
    </ul> 
 
    </div> 
 
</div>