[css3-flexbox] Calculating flexbox dimensions

I'm having trouble defining a truly flow-direction agnostic sizing
algorithm for flexboxes that works "well" in all situations.  The
problem I'm having should be identical to the problem of sizing
orthogonal flows in mixed-direction pages, so hopefully someone with
some experience with the solutions addressed in Writing Modes can help
out here.

If we assume that the flexbox itself is embedded into a horizontal
writing-mode block, then we have four situations we may run into that
affect how the flexbox's size is calculated:

1. The flexbox is horizontal, and all flexbox items have a horizontal
writing-mode.  In this case, layout is easy.  Calculate flexbox width
as either 'stretch' (normal block behavior) or 'fit-content'
(inline-block behavior).  Use this to do free-space calculation for
the flexbox items horizontally.  Based on these calculated widths,
determine minimum height of each flexbox item.  Set the flexbox's
height to the largest such value, then go back and do free-space
calculation for the flexbox items vertically.

2. The flexbox is vertical, and all flexbox items have a vertical
writing-mode.  I want to first calculate flexbox height, as that
corresponds to the layout axis, which does free-space calculation
first.  But how to find the width?  The flexbox is embedded in a
horizontal writing mode, so there might not be a containing block
height to use in the calculation of 'stretch'/'fit-content'.  I
suspect this is already solved for Writing Modes, but I can't quite
figure it out.

3. The flexbox is horizontal and contains both vertical and horizontal
writing-mode flexbox items.  Start by calculating the flexbox's width.
 If it's 'stretch', no problem.  If it's 'fit-content', ask all the
flexbox for their intrinsic width.  For the horizontal items, it's
just max-content.  For the vertical items, if the flexbox has a
definite height, format them using that height and return their width;
otherwise, format them as max-content and return the width.  Use the
sum of these widths to figure out width.  Distribute free space, then
calculate height.  For the horizontal items, just lay them out with
the width I previously calculated and return the height.  For the
vertical items, though, the height still has to be the max-content
height for consistency, which can make the flexbox *really* wide.  Any
way around this?

4. The flexbox is vertical, and at least some flexbox items have a
horizontal writing-mode.  This combines some of the issues from #2 and
#3.


The problem in general is that I use the 'max-content' width/height of
flexbox items.  This works fine if the flexbox item's measure axis is
the same as the measure axis of the flexbox's parent, but gives bad
results when they're orthogonal.  This problem is basically the same
as what Writing Modes already has to deal with; how does WM prevent
orthogonal-flow boxes from laying out all their content in a single
giant line?

~TJ

Received on Friday, 25 February 2011 00:59:06 UTC