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();
}