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

質問

フレックスボックスを使ってフルハイトのアプリを使いたいのですが、どうすればいいですか？古いフレックスボックスのレイアウトモジュールを使って欲しいものが見つかりました( display: box; など)を使って欲しいものがありましたので、このリンクで紹介します。 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サイトですが、content要素のflexboxプロパティの関係でフッターが一番下に来ています。CSSコードと結果の間にあるバーを動かして、異なる高さをシミュレートすることをお勧めします。

どのように解決するのですか？

おかげさまで https://stackoverflow.com/users/1652962/cimmanon のおかげで、答えがわかりました。

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

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

要素 は は高さを持ちます。 ミニハイト を使用することができます。 height: 100px; と全く同じであることを min-height: 100px;

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

というわけで、もしあなたが min-height を縦スクロールで表示させたい場合に最適です。

#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/