スクロール可能な要素のドロップダウンメニュー

Question

サブメニューがドロップダウンメニューに表示されているメニューを実装しようとしています。

メニューは、ヘッダー、メニュー要素、およびフッターで構成されています。これを行うために、親要素にはdisplay: flexという単純なものを使用しました。ヘッダーとフッターには2つの固定サイズが使用され、残りのコンテンツにはflex: 1という固定サイズが使用されています。

コンテンツのスクロールを管理するには、コンテンツコンテナにoverflow: autoも設定する必要があります。これにより、ドロップダウンメニューがX軸のスクロールに表示されます。

この問題を解決するにはどうすればよいか分かりませんが、position: fixed,as mentioned in this questionで試してみましたが、スクロールしようとすると機能しません。

Hereは、固定位置を使用しようとして失敗したJSFiddleです。

現在の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> 

JSが唯一のVueなどのようにフォーマットされたいくつかのテストデータのインスタンスが含まれています

{ 
    title: '1', 
    childrenVisible: false, 
    children: [{ 
    title: '1.1', 
    }], 
}, 

と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; 
    } 
    } 
} 

Answer 1

childrenVisibleフラグを直接切り替えるのではなく@mouseenterでメソッドを使用すると、メソッドのパラメータに渡されるイベント。

これは画面座標と親要素への参照を持ち、その子です。

@mouseenter="mouseEnter" 

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