W3C home > Mailing lists > Public > www-style@w3.org > October 2012

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

From: Morten Stenshorne <mstensho@opera.com>
Date: Tue, 09 Oct 2012 14:13:57 +0200
To: Rudolph Gottesheim <r.gottesheim@loot.at>
Cc: www-style@w3.org
Message-ID: <87k3uzg7wa.fsf@aeneas.oslo.osa>
Rudolph Gottesheim <r.gottesheim@loot.at> writes:

> In the following example I'd expect the blue areas to be covered by
> the red areas completely, because of the 'height: 100%' of the anchor
> elements, but they aren't in Chrome 22. (Haven't tested it in other
> UAs)

Same in Opera.

> HTML:
> <ul class="container">
>     <li class="item">
>         <a href="." class="inner">A<br />B</a>
>     </li>
>     <li class="item">
>         <a href="." class="inner">A</a>
>     </li>
>     <li class="item">
>         <a href="." class="inner">A<br />B<br />C</a>
>     </li>
> </ul>‚Äč
>
> CSS:
> .container {
>     display: flex;
> }
> .item {
>     flex: 1;
>     background-color: blue;
> }
> .inner {
>     display: block;
>     height: 100%;
>     background-color: red;
> }
>
> Here's a fiddle: http://jsfiddle.net/GgzGf/2/
>
> Is this the expected behaviour? I would think that a flex item is able
> to give a length context to their children.

The height of the "item" elements are "indefinite" (a term used in the
flexbox) spec, so the percentage height on the "item" elements should
compute to 'auto'.

http://www.w3.org/TR/CSS2/visudet.html#the-height-property

  "If the height of the containing block is not specified explicitly
   (i.e., it depends on content height), and this element is not absolutely
   positioned, the value computes to 'auto'."

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
---- Office: +47 23692400 ------ Mobile: +47 93440112 ----
------------------ http://www.opera.com/ -----------------
Received on Tuesday, 9 October 2012 12:14:36 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT