Javascript 可滚动元素中的下拉菜单

我正在尝试实现一个下拉菜单中显示子菜单的菜单

菜单由页眉、菜单元素和页脚组成。为此，我在父元素上使用了一个简单的

display:flex

，页眉和页脚有两个固定大小，其余的内容有

flex:1

为了管理内容中的滚动，我还必须在内容容器上设置一个

溢出：auto

。这会导致下拉菜单显示在X轴滚动中

我不知道如何解决这个问题，我尝试过使用

position:fixed

，但当我尝试滚动时，它不起作用

的JSFIDLE，尝试使用固定位置失败

当前HTML模板：

<div id="app">
  <div class="menu">
    <div class="menu-header">
      <h1>
        Header
      </h1>
    </div>
    <div class="menu-content">
      <ul>
        <li class="element" v-for="(element, index) in elements" :key="index" 
          @mouseenter="element.childrenVisible = true"
          @mouseleave="element.childrenVisible = false">
          <h2>
            {{ element.title }}
          </h2>
          <div class="children-wrapper" v-if="element.childrenVisible && element.children && element.children.length">
            <ul class="children">
              <li v-for="(child, childIndex) in element.children" :key="childIndex">
                <h3>
                  {{ child.title }}
                </h3>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="menu-footer">
      <p>
        Footer..
      </p>
    </div>
  </div>
</div>

CSS（sass）如下所示：

.menu {
  width: 100px;
  max-height: 500px;
  background-color: #0a6e89;
  display: flex;
  flex-direction: column;

  .menu-header, .menu-footer {
    height: 70px;
    flex-shrink: 0;
    background-color: #f9f8f2;
  }

  .menu-content {
    flex: 1;
    overflow: auto;
  }
}

.menu-content {  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .element {
    position: relative;

    .children-wrapper {
      position: absolute;  
      top: 0;
      left: 100%;
    }

    .children {
      position: fixed;
      background-color: #f9f8f2;
      border: 1px solid black;
    } 
  }
}

---

如果在@mouseenter中使用方法而不是直接切换childrenVisible标志，则会将事件传递给该方法的参数

它有屏幕坐标和对父元素及其子元素的引用

@mouseenter="mouseEnter"

methods: {
  mouseEnter (event) {
    // adjust child position here
  }
}

---

请包括您的代码，而不仅仅是一个链接（可能有一天会中断）

@mouseenter="mouseEnter"

methods: {
  mouseEnter (event) {
    // adjust child position here
  }
}