如何让一个元素溢出：当父元素溢出时为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>