ブラウザ ウィンドウの残りの垂直スペースを Flexbox 行で埋めるにはどうすればよいですか?

フレックスボックス レイアウトに残りの垂直スペースを消費させる

フレックスボックス レイアウトの 3 行目は、ブラウザ ウィンドウの残りの高さを埋めるように動的に拡張する必要があります。これを実現するには、次の手順を実行します。

1. HTML、本文、親フレックスボックス コンテナ (.wrapper) の高さを 100% に設定して、親の完全な高さを継承します。
2. 1 より大きい flex 値を 3 行目 (.row3) にのみ適用し、他の行は元の高さのままにします。これにより、.row3 に拡張機能が与えられます。
3. 次のコードを .wrapper クラス内に追加して、列がブラウザーの全高さを確実に認識できるようにします。

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome needed this initially */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Chrome also needed this at one point */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome might need this for a bit */
}

以上がブラウザ ウィンドウの残りの垂直スペースを Flexbox 行で埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。