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

On 10/09/2012 02:31 PM, Rudolph Gottesheim wrote:
> Am 09.10.2012 19:50, schrieb Ojan Vafai:
>> Rudoph Gottesheim wrote:
>>> Yeah, I get that. My question is if the flexbox mechanics (e.g.
>>> align-self: stretch) should be considered setting the height
>>> explicitly.
>>>
>>> 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.
>>>
>> If you make the flexitems themselves also be flexboxes, then you
>> can get the desired layout: http://jsfiddle.net/GgzGf/3/
>
> That's an awesome solution, even though it feels a little hacky.
>
> I'll use that for now, but I really think there should be put some
> more thought into what I've pointed out. Horizontal menus are one
> of *the* use cases for flexbox* and so they should work as "expected".
> I know it's not easy to suit everyone's needs, but this really seems
> important to me.

Hi Rudolph!
Based on feedback from implementers (mainly MSFT and Mozilla), the
CSSWG has changed the flex layout algorithm to make this case work.
It required two rule changes (that apply only to single-line flex
containers):
   - if the flex container has a definite (specified) height,
     a stretched item is also considered definite and percentages
     inside it will work accordingly
   - if the flex container is auto height, a stretched item is
     considered definite after we have measured the contents of
     the flex items treating any percentage-height children as
     auto-height. This requires a relayout step, but it makes
     height: 100% work as expected on auto-height flex containers.
I think that should cover your cases!

If you've got testcases for this and want to submit them, that'll
probably help make sure implementations align on the expected
behavior and get the cases you care about right. :) To make a test,
you'll need two HTML files that render the same: one using the flex
features (the test), one using some other features (e.g. tables) to
create the same result (the reference). Browsers will screenshot
both pages and compare them to see if they pass.

~fantasai

Received on Wednesday, 19 March 2014 19:39:52 UTC