css - 如何使元素溢出 : auto when its parent is overflow: hidden?

Question

fiddle 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() {
	$('body').toggleClass('menu-open');
	$('.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>