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

• From: Rudolph Gottesheim <r.gottesheim@loot.at>
• Date: Tue, 09 Oct 2012 14:01:53 +0200
• To: www-style@w3.org
• Message-ID: <50741231.1070102@loot.at>

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)

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 use case should be clear from the given example, but I'll explain 
it anyway: I want an unordered horizontal list of links, each with the 
same clickable area/height.)

Rudolph Gottesheim

[1] http://jsfiddle.net/GgzGf/1/

Received on Tuesday, 9 October 2012 12:02:28 UTC