CODEWITHSUNDEEP
javascripthtmlcssflexbox
daveycroqet
daveycroqet

Reputation: 2727

Flexbox working in Chrome only

This flexbox seems to only work in Chrome. I have played with it extensively and tried applying various fixes found at https://github.com/philipwalton/flexbugs

Note: JavaScript is employed to resize it based on the background-image height.

I'm curious if anyone can make it work the same in another browser. Thanks for reading.

Obligatory code:

CSS:

.section-1 {
    background: url("http://img01.deviantart.net/cb2e/i/2011/323/0/3/background_05_1600x1200_by_frostbo-d42mpk5.png") no-repeat;
    background-attachment: scroll;
    background-size: contain;
    position: relative;
    color: #fff;
    height: 100%;
    margin: 0;
    padding: 0;
}
.flex-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid red;
}

JavaScript:

var img = new Image();
var section = document.getElementsByClassName("section-1")[0];
var flex = document.getElementsByClassName("flex-container")[0];
img.src = window.getComputedStyle(section, null).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize() {
    var bgHeight = section.offsetWidth * img.height / img.width;
    console.log(bgHeight);
    section.style.height = bgHeight + 'px';
    flex.style.height = bgHeight + 'px';
}
window.onresize = resize;
resize();

Upvotes: 1

Views: 315

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

Since you're using percentage heights on the <section> and .flex-container div, you need to also specify a height for all parent elements, up to and including the body and root element (html).

Add this to your CSS:

html, body { height: 100%; }

DEMO: https://jsfiddle.net/w5e7c93n/20/

For more details see: Working with the CSS height property and percentage values

Upvotes: 1

Related Questions