如何使元素溢出：当父元素溢出时自动：隐藏？

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%，并将max-height与100%添加到菜单中：

.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;
 }

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;