javascript - Flexbox を使用して全画面表示すると、Chrome で下余白が表示されない

Question

フルスクリーン API を使用すると、Webkit (Chrome および Opera) で興味深い問題が発生します。Flexbox を使用して基本的なレイアウトを行い、その要素を全画面表示しています。全画面表示でない場合、上下の余白は正しいです。しかし、 に設定された要素で全画面表示にするdisplay:flexと、下の余白が表示されません。この問題は IE や Firefox では発生しませんが、Chrome、Opera、Chrome for Android では発生します。

ここにCSSがありませんか？それともこれはバグですか？バグの場合、回避策はありますか?

注: Flexbox http://www.w3.org/TR/css3-flexbox/の候補推奨実装をサポートする最新のブラウザーのみをターゲットにしています。

• JSFiddle マークアップ: http://jsfiddle.net/Dragonseer/dCceV/
• JSFiddle ショー: http://jsfiddle.net/Dragonseer/dCceV/show/

---

section
{
    width: 100%;
    min-height: 100%;
    background-color:white;

    display:flex; //<--- If I remove this, it works fine (but my layout gets messed up)

    overflow: auto; //<--- So I can scroll content

}

article
{
    margin-top: 50px;
    margin-bottom: 50px;
}

<section id="section">
    <article>
        //Lots of Content
    </article>
</section>

var element = document.getElementById("section");
if (element.webkitRequestFullscreen)
{
    element.webkitRequestFullscreen();
}