モバイルのメニュー バーで「overflow-x: hidden」が機能しないのはなぜですか?

Overflow-x:hidden がモバイル ブラウザで動作しない

この問題では、Web サイトの黒いメニュー バーがモバイルのウィンドウの端を超えて拡張されます。ブラウザでは、本文に overflow-x:hidden を適用しているにもかかわらず。この過剰な空白は説明されておらず、HTML 構造の外部にあるように見えます。

解決策:

この問題を解決するには、著者は Web サイトのコンテンツをラッパー div 内にカプセル化し、本体ではなくラッパーに overflow-x:hidden を適用する、またはhtml.

ブラウザはビューポート メタ タグを優先し、html 要素と body 要素のオーバーフロー属性を無視するようです。ラッパー div 内に overflow 属性を配置すると、制約が効果的に適用され、コンテンツの展開が制限されます。さらに、ラッパー div を基準とした location: の追加も必要になる場合があります。

例:

  <div><pre class="brush:php;toolbar:false">#wrapper {
  overflow-x: hidden;
  position: relative;
}