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

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 UTC