Flexbox网格无法在Firefox中运行

Question

我有以下网格：

.allmighty-bg{
    background: url(../images/earth.jpg) no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    height: auto;
    width: 100%;
}
.flex-gridify{
    padding-top: 1.2rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    padding-bottom: 1.2rem;
}
.flex-post{
    flex: 0 1 30%;
    align-self: center;
    margin-bottom: 1.5rem;
}
div.flex-post .inner{
    background-color: rgba(255,255,255,0.7);
    padding: 20px;
}
.inner .inner-title{
    text-align: center;
}
.inner-tweet-size-description p{
    font-size: 1.4em;
}


<div class="allmighty-bg">
    <div class="flex-gridify">
        <div class="flex-post">
            <div class="inner z-depth-3">
                <h3 class="inner-title">Some Post Title Here!</h3>
                <div class="inner-image">
                    <img class="responsive-img" src="images/trees.jpg">
                </div>
                <div class="inner-tweet-size-description">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada nisl vel ipsum consectetur, id eleifend quam cursus. Etiam vel posuere.
                    </p>
                </div>
            </div>
        </div>
        <div class="flex-post">
            <div class="inner z-depth-3">
                <h3 class="inner-title">Some Post Title Here!</h3>
                <div class="inner-image">
                    <img class="responsive-img" src="images/roses.jpg">
                </div>
                <div class="inner-tweet-size-description">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada nisl vel ipsum consectetur, id eleifend quam cursus. Etiam vel posuere.
                    </p>
                </div>
            </div>
        </div>
        <div class="flex-post">
            <div class="inner z-depth-3">
                <h3 class="inner-title">Some Post Title Here!</h3>
                <div class="inner-image">
                    <img class="responsive-img" src="images/trees.jpg">
                </div>
                <div class="inner-tweet-size-description">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada nisl vel ipsum consectetur, id eleifend quam cursus. Etiam vel posuere.
                    </p>
                </div>
            </div>
        </div>
        <div class="flex-post">
            <div class="inner z-depth-3">
                <h3 class="inner-title">Some Post Title Here!</h3>
                <div class="inner-image">
                    <img class="responsive-img" src="images/roses.jpg">
                </div>
                <div class="inner-tweet-size-description">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada nisl vel ipsum consectetur, id eleifend quam cursus. Etiam vel posuere.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="modal1" class="modal modal-fixed-footer">
        <form method="post">
            <div class="modal-content">
                <h4>New Post</h4>

            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-action waves-effect waves-green btn-flat">Post</a>
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
            </div>
        </form>
    </div>

它在IE11，Edge，Chrome，Maxthon上完美运行，但Firefox出现以下错误：

当chrome有这样的东西时：

知道怎么解决这个问题吗？我尝试过许多事情但没有成功。我所做的就是打破其他浏览器，而firefox仍然破碎。