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/