我可以将父容器设置为溢出：隐藏，但只有特定的子元素表现得好像父容器溢出：可见？

Question

我有两个子元素，它们是父容器内的选择字段下拉菜单。父容器是我为我的项目制作的模态。我还有其他子元素，例如标题、文本和按钮。我只希望我的两个选择字段下拉菜单的行为就像父容器的溢出设置为可见，但子元素的行为就像父容器的溢出设置为隐藏一样。

本质上，当用户单击选择字段并且下拉列表下降时，我希望我的下拉列表在父级之外可见。当我最小化模态时，其他孩子被剪辑在父容器中。我最初将 'modal-container' 设置为溢出：可见，因此我的下拉列表在父容器之外可见，但是当我最小化我的模式时，其余子元素在我的父容器之外可见。

这是一个总体布局：

 <div className="modal-container">
      <div className="modal-inner-container">
        <h4 className="modal-header">header</h4>
        <div className="modal-text">
           <p>some text</p>
        </div>
        <div className="modal-dropdown-container">
           <div className="modal-dropdown></div>
           <div className="modal-dropdown></div>
        </div>
        <button className="modal-button">
      </div>
</div>

有没有办法解决这个问题？我需要我的下拉菜单位于我的文本 div 和按钮之间，因此如果我希望我的下拉菜单相对于它们，那么绝对位置在这种情况下不适用。

我愿意接受其他建议。

Answer 1

可能你可以用position: absolute; '在你想溢出的孩子身上做到这一点。看看我做的这个例子。

.contain {
  height: 100px;
  width: 100px;
  background-color: red;
  overflow: hidden;
}

.child1 {
  height: 30px;
  width: 30px;
  background-color: blue;
}

.child2 {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: absolute;
}

<div class="contain">
 <div class ="child1">one</div>
 <div class ="child2">two</div>
</div>

如您所见，子 2 扩展超出其父级，即使父级有一个隐藏的溢出。