容器内的绝对定位元素有溢出：auto

Question

我们的模式包含position: fixed和overflow-y: auto。

当我们有很多组件溢出，从而显示滚动条时，这很有效。

但是，如果我们在模式中有一个自定义日历字段，它会打开一个弹出/下拉日历，并且该元素位于容器的一侧之外，则不会显示。

有没有办法在保持模态overflow-y: auto的同时显示弹出/下拉菜单？像这样：

Codepen详细说明：http://codepen.io/anon/pen/jWmNMa

.modal {
  position: fixed;
  background-color: pink;
  height: 200px;
  width: 200px;
  left: 30%;

  /* comment out this to show dropdown*/
  overflow: auto;
}

.dropdown {
  background-color: lime;
  height: 80px;
  width: 80px;
  position: absolute;
  left: -50px;
}

HTML：

<div class="modal">
  <div class="dropdown">
    This is content in a dropdown.
  </div>
  Long long overflowing text...
</div>

Answer 1

在您的情况下，当绝对定位的子元素设置为.modal时，它不可能出现在父overflow: auto元素之外（除非您将position元素的.dropdown设置为fixed。）

最简单的解决方法是包装文本和其他内容，然后在该元素上设置overflow: auto。例如，您可以使用.content元素对其进行包装，然后设置height: 100%和overflow: auto以添加滚动条并隐藏这些特定元素的溢出。

Updated Example

<div class="modal">
  <div class="dropdown">
    This is content in a dropdown.
  </div>
  <div class="content">...</div>
</div>

.modal {
  position: fixed;
  background-color: pink;
  height: 200px;
  width: 200px;
  left: 30%;
}
.modal .content {
  height: 100%;
  overflow: auto;
}

Answer 2

This为我工作。

当然，您受到position:fixed;不方便的影响，但 会达到您想要的效果。

.dropdown {
  background-color: lime;
  height: 80px;
  width: 80px;
  position: fixed;
  margin-left:-50px;
}

希望有所帮助。