W3C home > Mailing lists > Public > www-style@w3.org > April 2014

Re: [css3-flexbox] Children of flex items ignoring cross-axis percentage length

From: Greg Whitworth <gwhit@microsoft.com>
Date: Mon, 7 Apr 2014 16:42:01 +0000
To: fantasai <fantasai@inkedblade.net>, Tab Atkins Jr. <jackalmage@gmail.com>
CC: "www-style@w3.org" <www-style@w3.org>, "mstensho@opera.com" <mstensho@opera.com>, "ojan@chromium.org" <ojan@chromium.org>
Message-ID: <80b35ac18afe4a1aa4572ae5d5a38f84@DM2PR03MB400.namprd03.prod.outlook.com>
> Hi Rudolph!
> Based on feedback from implementers (mainly MSFT and Mozilla), the
> CSSWG has changed the flex layout algorithm to make this case work.
> It required two rule changes (that apply only to single-line flex
> containers):
>    - if the flex container has a definite (specified) height,
>      a stretched item is also considered definite and percentages
>      inside it will work accordingly
>    - if the flex container is auto height, a stretched item is
>      considered definite after we have measured the contents of
>      the flex items treating any percentage-height children as
>      auto-height. This requires a relayout step, but it makes
>      height: 100% work as expected on auto-height flex containers.

Hey Fantasai and Tab,

This resolution is specifically scoped to stretched flex items but we are seeing interop issues pertaining to flex items in a column flex container. Currently IE and Firefox are resolving the % while Chrome is not. Should this resolution pertain to flex items as well. Below is the repro code and here is a fiddle (http://jsfiddle.net/hJe2r/) for you to test with. Also we were curious why this resolution was scoped to a single-line flex container when this could easily be applicable to both single- and mult-line scenarios.

Thanks,
Greg

FLEX REPRO (FOR THE ARCHIVES)
=================

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <style type="text/css">
        .flex {
            display:flex;
            flex-direction:column;
            height:500px;
        }

        .item {
            flex:1 0 0px;
            background:red;
        }

        .item > div {
            height:100%;
            background:green;
        }

    </style>
</head>
<body>
    <div class="flex">
        <div class="item">
            <div></div>
        </div>
    </div>
</body>
</html>
Received on Monday, 7 April 2014 16:42:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:21 UTC