フルハイトの Flexbox アプリケーションで垂直スクロールを実装するにはどうすればよいですか?

フルハイト アプリケーションでの Flexbox と垂直スクロールの組み合わせ

Flexbox は、柔軟なレイアウトを作成するための強力なメカニズムを提供します。ただし、フルハイトのアプリケーションと組み合わせて使用​​すると、垂直スクロールの実現が困難になる可能性があります。

以前の解決策

古いフレックスボックス プロパティの使用など、以前のアプローチ (例: box) は、従来のフレックスボックス構文をサポートするブラウザーで効果的であることが証明されています。ただし、新しいフレックスボックス プロパティを使用する最新のブラウザでは、コンテナーで height: 0px を設定するなどの回避策が採用されていますが、望ましくない副作用が発生する可能性があります。

最適な解決策

最適な解決策には、次の設定が含まれます。フレックスボックス レイアウト内の垂直スクロール可能な要素までの高さ。高さ (または最小の高さ) を指定すると、フレックスボックスは要素の高さを再計算し、必要に応じて垂直スクロールを強制しながら、コンテンツに合わせて要素の高さを必要に応じて拡大できるようにします。

#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 100px;
}

利点

このソリューション:

• フレックスボックス内で水平方向と垂直方向の両方の柔軟性を提供しますレイアウト。
• 追加の回避策を必要とせず、必要な場合にのみ垂直スクロールを保証します。
• 最新のブラウザおよび将来の CSS 標準と完全に互換性があります。

デモ

提供されている JSFiddle の拡張バージョンは、最適なソリューションの動作を示しています。 http://jsfiddle.net/ch7n6/867/.

以上がフルハイトの Flexbox アプリケーションで垂直スクロールを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。