フルハイトの Flexbox アプリで垂直スクロールを有効にする方法

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

問題:

を使用してフルハイトのアプリ レイアウトを作成する垂直方向を有効にしたときのフレックスボックス

ディスカッション:

最新のフレックスボックス プロパティを使用すると、フルハイトのアプリ レイアウトを実現できます。ただし、垂直スクロールの追加は難しい場合があります。

古いフレックスボックス レイアウト (例: display: box) を使用する最初のアプローチは、その古いバージョンのみをサポートするブラウザで実行可能です。

これを回避するにはこの問題に対して、コンテナの高さを 0px に設定するハックが提案されています。この回避策によりスクロールの問題は解決されますが、新たな問題が発生します。

解決策:

理想的な解決策は、フレックスボックス レイアウト内のスクロール可能な要素に高さを設定することです。デフォルトでは、フレックスボックスは要素の高さを計算するため、高さ 0px で垂直スクロールが効果的に有効になります。

最小の高さが必要な場合は、代わりに min-height を使用できます (例: min-height: 100px)。 .

コード例:

このアプローチフレックスボックスが動的に再計算できるようにしながら、スクロール可能な要素の高さを確保します。

更新された Fiddle:

[更新された JSFiddle](http://jsfiddle.net/) ch7n6/867/) は最終的な解決策を示しています。

以上がフルハイトの Flexbox アプリで垂直スクロールを有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。