有没有办法让 Bulma 下拉菜单不被溢出隐藏：包装 div 的滚动

Question

我在滚动 div 中有一个 Bulma 下拉菜单，但我希望下拉菜单忽略周围 div 的边界。

所以我知道这可以通过使用固定位置的一些技巧来实现，但我无法让它发挥作用。 如果可能的话，我也不想退出 bulma 下拉菜单。

我制作了这个代码笔来可视化我的问题：

https://codepen.io/meneman/pen/BaQLVwd

在 HTML 中，我有一个包装 div，它的溢出设置为滚动，还有一个内部 div，它比外部 div 大，用作滚动内容。此 div 还包含一个下拉列表，当它处于活动状态时，我希望在所有 div 上方可见。

<html>
  <body>
    
<div id="scroll-wrapper">
  <div id="inner-wrapper">
    <!-- replace is-active with is-hoverable to have actual dropdown-->
  <div class="dropdown is-active"> 
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
      <span>Content</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu2" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
      <hr class="dropdown-divider">
      <div class="dropdown-item">
        <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
      </div>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        This is a link
      </a>
    </div>
  </div>
</div>
  
  </div>
</div>
    
    </html>
  </body>

css:

body {
  display: flex;
  background: lightgreen;
  min-height: 100vh;
}
#scroll-wrapper {
  background-color: lightblue;
  margin: auto;
  padding: 1rem;
  height: 200px;
  width :300px;
  overflow-y: scroll;
  
}

#inner-wrapper {
  
  height: 300px
}

Answer 1

如果将溢出设置为滚动，它将隐藏溢出的内容。 overflow-y:scroll 元素必须不是是下拉菜单的父元素，而是要隐藏的内容的父元素。

如果要隐藏除下拉列表以外的所有内容，则overflow-y:scroll 的元素需要是不覆盖下拉列表的元素。

这样做的一种方法是将框和下拉列表放在同一位置，但框将是下拉列表的同级元素，下拉列表将在其上方为position:absolute，使用容器提供他们都是一个可以坚持的立场。

positioned container
╚═button container with overflow-y:scroll
  ╚═button
╚═dropdown with position-absolute

然后你可以做类似的事情

#dropdown {
  position: absolute;
  top: 40px;
  left: 7px;
}

这样您将按钮保留在其控制的下拉列表上方，但下拉列表是同级的，因此它不会受到按钮的直接容器的溢出限制。