CODEWITHSUNDEEP
cssgoogle-chromeresponsive-designviewportflexbox
dakab
dakab

Reputation: 5875

viewport height inheritance with flexbox (inconsistency in Chrome)‽

EDIT: As of Chrome 34, the construct below will be rendered correctly as expected. From this follows that it actually was a bug in ealier Chrome versions and that this relatively straightforward CSS simply works.

So I just discovered viewport-percentage lengths and I thought they would go great with a sleek responsive layout test using flex-box. Surprisingly, Firefox and Internet Explorer rendered it identically and just as expected. This time, Chrome refuses to do-what-I-say.

And I want: no scroll bars, all div elements changing size according to parents, use height: 100%, visible box layout even without content, insert block-level content into the layout.

To be more specific on a cause, it’s the parent element’s height that seems not to be inherited. In this case, I expect height: 100% on inner elements to result in the height of the parent element, which itself is 70vh (equal to 70% of the viewport’s height).

If there’s no inside an inner div, Chrome won’t display the element at all (unlike FF/IE), just as if they weren’t block elements at all (having no height being empty).

Please tell me:

After all, it says I can use it.


Here’s the code: http://jsfiddle.net/ZPRdh/

Here’s a rendering:

rendering in browsers

EDIT

It seems that flex-box is irrelevant in this issue. The following HTML page reproduces the layout idea, and also renders identically in IE and FF, but not in Chrome:

<!DOCTYPE html>
<html>
    <head>
        <title>stackoverflow.com/questions/19450503/</title>
        <style type="text/css">
            body{background-color:#000;margin:0;font:normal 4em sans-serif;color:#888;}
            header,section,footer{overflow:hidden;}
            header,section,footer,article,figure{display:block;margin:0;padding:0;}
            header {background-color:#333;height:20vh;}
            section{background-color:#555;height:70vh;}
            footer {background-color:#777;height:10vh;}
            article{background-color:#999;width:20vmin;height:20vmin;}
            figure {background-color:#BBB;width:50%;height:50%;}
        </style>
    </head>
    <body>
        <header></header>
        <section>
            <article>
                <figure></figure>
            </article>
        </section>
        <footer></footer>
    </body>
</html>

Either I am (and others are) not getting something fundamental here, or there’s an actual unintended inconsistency in Chrome.

Upvotes: 3

Views: 3501

Answers (1)

cimmanon
cimmanon

Reputation: 68319

I'm not sure if this is a bug or feature, but Chrome (and Opera's using Presto) doesn't the treat the length along the main axis the same way it does the element's actual size (height for column orientation, width for row orientation). That's why percentages aren't working as you expect: the height of the middle element is treated as being just large enough to contain your 4 lines of text.

If you need the children to fill the flex item, you'll need to promote it to a flex container (though this doesn't work out quite right in your case).

http://jsfiddle.net/ZPRdh/3/

.b {
    height:70vh;
    background-color:#555;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.b>div:nth-child(1) {
    width:50%;
    height:30%;
    flex: 30%;
    background-color:#AAA;
}
.b>div:nth-child(2) {
    width:40%;
    height:40%;
    flex: 40%;
    background-color:#CCC;
}
.b>div:nth-child(3) {
    width:30%;
    height:30%;
    flex: 30%;
    background-color:#EEE;
}

Upvotes: 3

Related Questions