css - Flex を使用した CSS レイアウト

Question

だから私はクロムとFirefoxで異なって見えるこのスタイルを持っています...私はこの大きな長方形の領域がページのメイン領域になるようにしたいと思います。

私の現在のページ:

<div class="flexContainer">
    <div id="mainArea" class="mainArea">
        Main area
    </div>
    <div class="area ">
        asdf
    </div>
    <div class="area ">
        asdf
    </div>
    <div class="area">
        asdf
    </div>
    <div class="area">
        asdf
    </div>
    <div class="area">
        asdf
    </div>
</div>

および現在のCSS：

.area {
    background: #FFFFFF;
    /*border-radius: 15px;
    box-shadow: 0px 0px 20px 1px #303030;*/
    margin: 0px 0px 2px 2px;
    width:12em;
    min-height:12em;
    display:block;
}

.mainArea {
    display:block;
    width:700px;
    height:100%;
    background: #FFFFFF;
    padding:5px;
    /*box-shadow: 5px 0px 10px 1px #303030;*/
}

.flexContainer {
    height:100%;
    margin:0px;
    padding:0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: baseline;
    -webkit-flex-flow: column wrap;
    flex-direction: column wrap;
}

今のところ、クロムで開始すると、列間のスペースが非常に大きいことを除けば、ほとんど問題ないように見えます。私はすでにパディングとマージンで奇妙なことをしようとしましたが、何も役に立ちません。次に、Firefoxで起動すると、列間のスペースは問題ありませんが、各divは別の列にあります:(何が間違っていますか?