css - 容器内绝对定位元素溢出 : 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;
}