Css flex在firefox 53中不工作

有点卡住了。我正在用Firefox53测试我的网站。页面没有填满整个高度。我在Chrome和Safari上进行了验证，一切看起来都很好

我在www.caniuse.com上验证了Firefox53支持

Flex

。仍然无法正确呈现页面

这里是网站。在正确渲染的Chrome浏览器和不正确渲染的Firefox 53浏览器上试一试

以下是相关的CSS

html{
    background-color: black;
}

body {
    /*min-width:800px;  suppose you want minimun width of 1000px */
    /*width: auto !important;   Firefox will set width as auto */
    width:100%; 

    margin:0;
    font-family: 'futura-pt', sans-serif;
    font-style: normal;
    font-weight: 400;

    display: flex;
    flex-flow: column;
    background-repeat:no-repeat;
    background-size:cover;
}

.content {
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;    
}

你在用百分比高度工作。例如：

.blackbox { min-height: 23%; }

您也没有定义父元素的高度，有些浏览器需要父元素来呈现子元素的百分比高度

使用此方法可以在浏览器之间呈现不同的呈现方式

要获得可靠的跨浏览器解决方案，请提供

正文

元素：

height: 100vh;

或者，如果希望

正文

随内容展开：

min-height: 100vh;

详情如下：