絶対配置要素アクティブ化スクロール

Question

私のヘッダにドロップダウンメニューがあります（この例では常に開いています）。メニューが開いているときは、開いているときにヘッダスクロールが有効になります。縦のヘッダースクロールバーを有効にせずにメニューを表示させるにはどうすればよいですか？ヘッダーに多くの要素を追加すると、ヘッダーの水平スクロールが有効にならないため、ヘッダーにoverflow-x: hiddenを設定する必要があることに注意してください。あふれ要素は水平方向に隠すだけです。

例えば

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container{ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.header{ 
 
    padding: 12px; 
 
    flex: 0 0 75px; 
 
    background: yellow; 
 
    overflow-x: hidden; 
 
} 
 

 
.content{ 
 
    flex: 1 1 auto; 
 
    padding: 12px; 
 
} 
 

 
.dropdown{ 
 
    position: relative; 
 
} 
 

 
.menu{ 
 
    padding: 12px; 
 
    position: absolute; 
 
    background: white; 
 
    top: 100%; 
 
    left: 0; 
 
} 
 

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

<div class="container"> 
 
    <div class="header"> 
 
    <div class="dropdown"> 
 
     <button>Dropdown</button> 
 
     <div class="menu"> 
 
     <ul> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
      <li>four</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae. 
 
    </div> 
 
</div>

： stackoverflowのドロップダウン：オープン時、ドロップダウンメニューは、スクロールバーを有するヘッダーなしヘッダ上に表示されます。私はこのような何かが起こるしたい：

Answer 1

あなたの問題はoverflow-xを設定することにより、あなたは全体の要素のoverflowプロパティを設定しているということです。オーバーフローを特に設定していなくても、メニューが絶対配置されていてもスクロールバーを有効にします。

この問題を解決するには、overflow-xプロパティを削除する必要があります。

私はthis questionにJamesKhouryの答え@から引用します。この理由：

あなたがオーバーフロー-xまたはオーバーフロー-y、および他のための可視以外のいずれかに見えるを使用している場合。表示される値はautoと解釈されます。

this analysisで、どのような組み合わせがこのような問題を引き起こしているかチェックすることもできます。

EDIT
質問がオーバーフロー-xが必要であることを指定するため、この記事にdownvoteの可能性があるとして、私が持つ要素の中から、絶対配置要素を取得する方法がないことを改めて述べるましょう前記方法で表示するためのオーバーフロー特性。この時点から、オーバーフロープロパティを破棄するかメニュー全体をスクラップするかを決めることができます。前者の方が明らかに回避しやすくなります。

Answer 2

これは何か？

スクロールバーがoverflow-xであるため、オーバーフローを削除するとスクロールバーが削除されます。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.header { 
 
    padding: 12px; 
 
    flex: 0 0 75px; 
 
    background: yellow; 
 
} 
 
.content { 
 
    flex: 1 1 auto; 
 
    padding: 12px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
} 
 
.menu { 
 
    padding: 12px; 
 
    position: absolute; 
 
    background: white; 
 
    top: 100%; 
 
    left: 0; 
 
} 
 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="dropdown"> 
 
     <button>Dropdown</button> 
 
     <div class="menu"> 
 
     <ul> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
      <li>four</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae. 
 
    </div> 
 
</div>