flex not working in firefox 53

Question

Bit stuck here. I am testing my site with Firefox 53. The pages are not filling the full height. I verified on Chrome and Safari and all looks well.

I verified with www.caniuse.com that Firefox 53 supports Flex. Still the page does not render correctly.

Here is the site http://actionmary.com/newSite/contact.html. Try on Chrome where it renders correctly and Firefox 53 where it does not.

Here is the Relevant 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;    
}

score 1 · Accepted Answer · edited May 23 '17 at 12:26

You're working with percentage heights. For example:

.blackbox { min-height: 23%; }

You're also not defining a height on parent elements, which some browsers require in order to render a percentage height on the child.

You can expect rendering variations among browsers with this method.

For a reliable, cross-browser solution, give the body element:

height: 100vh;

Or, if you want the body to expand with content:

min-height: 100vh;

More details here:

flex not working in firefox 53

1 Answers1

Linked