フルハイトアプリでフレックスボックスと垂直スクロールを組み合わせるにはどうすればよいですか？

flexboxを使用してフルハイトアプリを使用したい。私display: box;はこのリンクで古いflexboxレイアウトモジュール（およびその他のもの）を使用して欲しいものを見つけました：CSS3 Flexboxフルハイトアプリとオーバーフロー

これは、古いバージョンのフレックスボックスCSSプロパティのみをサポートするブラウザーに適したソリューションです。

新しいフレックスボックスのプロパティを使用したい場合は、ハックとしてリストされているのと同じリンクで2番目のソリューションを使用してみますheight: 0px;。縦スクロールを表示します。

他の問題が発生し、解決策よりも回避策であるため、あまり好きではありません。

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

基本的な例でJSFiddleも用意しました：http ://jsfiddle.net/ch7n6/

これはフルハイトのHTML Webサイトであり、フッターはコンテンツ要素のflexboxプロパティのために下部にあります。CSSコードと結果の間でバーを移動して、異なる高さをシミュレートすることをお勧めします。

答えをくれたhttps://stackoverflow.com/users/1652962/cimmanonに感謝します。

解決策は、垂直スクロール可能な要素に高さを設定することです。例えば：

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

flexboxが最小高さを必要としない限り要素を再計算するため、要素は高さを持ちます。height: 100px;min-height: 100px;

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

したがって、min-height垂直スクロールでaが必要な場合の最適なソリューション：

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

記事を表示するための十分なスペースがない場合に備えて、完全に垂直方向のスクロールが必要な場合：

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

最終的なコード：http : //jsfiddle.net/ch7n6/867/

Flexboxスペックエディタはこちら。

これはフレックスボックスの使用を推奨しますが、最良の動作を得るために調整する必要のあることがいくつかあります。

• 接頭辞は使用しないでください。接頭辞なしのフレックスボックスは、ほとんどのブラウザでサポートされています。常にプレフィックスなしで開始し、それをサポートするために必要な場合にのみプレフィックスを追加します。

• ヘッダーとフッターはフレックスするためのものではないため、両方にflex: none;設定する必要があります。現時点では、いくつかの重複する効果により同様の動作がありますが、後で誤って混乱させたくない場合を除いて、これに依存しないでください。（デフォルトはflex:0 1 auto、彼らが彼らの自動高さで開始し、成長縮小ではなくことができますので、彼らはまたしているoverflow:visible彼らのデフォルトトリガ、デフォルトでmin-height:auto全ての縮小からそれらを防ぐために。あなたが設定されている場合はoverflow、それらの上に、の行動min-height:auto変化（min-contentではなく0に切り替えます）そして、それらは突然、余分な背の高い<article>要素によって押しつぶされます。）

• あなた<article> flexもあまり単純化することができます-設定するだけでflex: 1;、あなたは行ってもいいでしょう。より複雑なことをする正当な理由がない限り、https：//drafts.c​​sswg.org/css-flexbox/#flex-commonの一般的な値に固執するようにしてください。それらは読みやすく、ほとんどの動作をカバーします。呼び出したいでしょう。

現在の仕様はこれに関してこれを言っていますflex: 1 1 auto：

width/ heightプロパティに基づいてアイテムのサイズを変更しますが、完全に柔軟にするため、主軸に沿った自由空間を吸収します。すべてのアイテムがどちらかである場合flex: auto、flex: initialまたはflex: none、サイズのされたアイテムの後に、任意の正の空き領域が持つアイテムに均等に分配されますflex: auto。

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

要素の高さが100pxであると言うと、絶対ではなく「推奨」サイズのように扱われるように思えます。縮小および拡大が許可されているため、許容されるだけのスペースを使用します。このため、この行を「メイン」要素に追加すると機能します height: 0（またはその他の小さめの数値）。