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

[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
Message-ID: <50741231.1070102@loot.at>
To: www-style@w3.org
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 GMT

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