指定高度时溢出-Y不起作用

Question

我正在开发一个新菜单，我正在尝试将我的内容放在这样的设置中： div位置固定，定义高度和溢出隐藏     div与位置相对，溢出Y auto并定义高度大于parent     / DIV / DIV 这是我的[编辑] jsfiddle： https://jsfiddle.net/bp9qdfb9/

Answer 1

溢出应该分配给溢出的元素的容器：

.wrapper {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-align: center;
}

.wrapper > .container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: red;
  overflow-y: auto;
}

.wrapper > .container > .page {
  display: block;
  position: relative;
  /* overflow-y: auto; */
  width: 100%;
  height: 1500px;
  background-color: blue;
}

.wrapper > .container > .page > .wrap-in {
  display: inline-block;
  width: 80%;
  margin-top: 50px;
  padding-bottom: 50px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.04);
}

<div class="wrapper">
  <div class="container">
    <div class="page">
      <div class="wrap-in">

      </div>
    </div>
  </div>
</div>