[css3-flexbox] stretch apply to percentage heights WAS: Children of flex items ignoring cross-axis percentage length

http://jsfiddle.net/GgzGf/6/

If a percentage height doesn't apply (e.g. because it's standards mode and
the containing block is auto-sized), should stretch apply to that flex item?

Currently in WebKit and, per the flexbox spec, it does not. I don't feel
strongly either way. Just want to confirm that this is the desired behavior.


On Tue, Oct 9, 2012 at 10:50 AM, Ojan Vafai <ojan@chromium.org> wrote:

> On Tue, Oct 9, 2012 at 10:36 AM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:
>
>> On Tue, Oct 9, 2012 at 5:45 AM, Rudolph Gottesheim <r.gottesheim@loot.at>
>> wrote:
>> > On 10/09/2012 02:13 PM, Morten Stenshorne wrote:
>> >> 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'."
>> >
>> > Yeah, I get that. My question is if the flexbox mechanics (e.g.
>> align-self:
>> > stretch) should be considered setting the height explicitly.
>>
>> It's *plausible* to do such a thing (deferring to the flex container's
>> height), though we're not right now.
>>
>
> height:fill-available will do this, no? As you said, it doesn't solve this
> specific problem though.
>
>
>> However, that wouldn't help your test case, as the flex container is
>> *also* auto height.
>>
>> > If this isn't possible (I'm no implementer, obviously), is there any
>> way to
>> > achieve effect I'm looking for? I think it's a very common use case: a
>> > horizontal list of links (like a menu bar), where the links themselves
>> are
>> > all the same height, even if some have line breaks and some don't.
>>
>> Hm, we don't quite have a solution for this.  I thought that "height:
>> fill-available;" (from <http://dev.w3.org/csswg/css3-sizing>) would
>> work, but it won't - it'll skip right through the flex container, too,
>> and make the <a>s the size of the document (or whatever the nearest
>> ancestor with a definite size is).
>>
>
> If you make the flexitems themselves also be flexboxes, then you can get
> the desired layout: http://jsfiddle.net/GgzGf/3/
>
> I'll note this as an issue for either the next level of Flexbox or Sizing.
>>
>
> If we made align-self:stretch work for blocks, that would be roughly
> equivalent to my nested flexboxes suggestion above.
>
>
>>
>> ~TJ
>>
>>
>