Flexbox grid not working in Firefox

Question

I have the following grid:

.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>

It works flawlessly on IE11, Edge, Chrome, Maxthon, however Firefox presents the following error:

When chrome has something like this:

Any idea how to fix this? I've tried many things without success. All I do is break the other browsers while firefox still remains broken.