ページをクリックして右にドラッグすると、水平オーバーフローの隠しアイテムが表示されます

Question

ページコンテンツの両側に2つのグラフィックが表示されます。ブラウザー/ページの幅が狭くなると、これらのアイテムが画面から切り取られ、コンテンツのための余裕が増えます。これは主に

.page { 
    height: 100%; 
    min-height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    min-width: 960px; 
} 

すべてが正常に動作しますが、私は周りのすべてのコンテンツをラップし、開口部bodyタグの後に次の要素である.page divの上min-widthセットを持っているということです。私は、ブラウザの幅がmin-width以下になると、ページの横から垂直スクロールバーが消えてしまうことに気付きました。

ここで問題のCodePenです：https://codepen.io/moy/pen/oemBEN

はbodyがビューになりましたが、それはmin-widthを設定していますで.page要素が残っているので、おそらくそれはある...理にかなっています。

ただし、最初に.page要素のオーバーフローを設定した理由は、bodyに設定したときに問題があったためです。この方法でコードを適用することで解決すると思った問題。

私はbodyに次のコードを移動した場合：私はそれが好きな

overflow-x: hidden; 
overflow-y: auto; 

すべてが動作しているように見えますが。 MacのChrome + FireFoxでコンテンツの長さが十分に長い場合、コンテンツ領域のいずれかの項目が切り取られ、垂直スクロールバーが表示されたままになります。 Safari（Mac）やWindowsのIEでページをチェックすると、サイドアイテムが正しく切り取られません。

ブラウザを縮小し、背景をクリックして右にドラッグすると、ページの切り抜かれた領域が表示され、乱雑に見えます。

方法はありますか？または、私は垂直スクロールバーが隠れている必要がありますか？

Answer 1

あなたはこのためにフレックスレイアウトを使用することができます。

https://codepen.io/anon/pen/EvrXmG

• .container要素がフレックスレイアウトを開始します。
• .imgの要素は、widthとflex-basisが設定されており、成長することは許されませんが、収縮して「最大幅」になります。
• .wrapの要素は、widthとflex-basisに設定されており、収縮せずに成長することができ、「最小幅」になります。

ページが大きくなると、.img要素は最大サイズに留まりますが、コンテンツはすべての空き領域を取得します。

ページが小さくなると、コンテンツは最小限の幅にとどまり、画像要素が消滅し始めます。

このソリューションは、古いブラウザでは安全ではありませんが、現代のブラウザBrowser compatibilityでは最も簡単な解決策の1つです。