如何讓一個元素溢出：當父元素溢出時爲auto：隱藏？

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

變化min-height到100%與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>