RE: [css3-flexbox] Calculating flexbox dimensions

I think your questions are about mixed-direction layout in general, not just about flexbox. When content in orthogonal direction is unconstrained, there is no god solution for default size. We have discussed that in Beijing (it looks like the minutes were not public yet then, but you can find them).

There is a few of ways to deal with underconstrained orthogonal flows
1) Do nothing. Authors have to provide appropriate sizes or constraints to get any reasonable results. Also, the situation is rare, so if poorly authored document is displayed poorly it is not really a problem.
2) Try to produce layout of a reasonable shape that can work with the orthogonal flow. For example, estimate amount of text and lay it out as a square.
3) Put an arbitrary constraint that can make underspecified content usable (although not necessarily elegant). For example constrain orthogonal content with viewport width or height.

In IE5.5 (first to have vertical text) we in fact did (2). If a piece of vertical text in the middle of horizontal document (or in a table cell) didn't have specified height we tried to make it a square (which involved binary search layout). It was fun, but since then I have converted to philosophy that being too smart in technology is not always good.

In Beijing, we have decided that constraining orthogonal flow with viewport height (or width) is a reasonably good default, because it (a) allows to scroll content to a point when it is readable and (b) is actually a very good default when the orthogonal element is the first element with content in the document (e.g. body).

The latter is what we did in IE8 and IE9, with adjustment by applicable margins, borders and paddings. CSS3 writing-mode spec should be saying the same thing (not sure where).

I am not sure if I am really answering your question, but I really don't think flexbox needs to have any code that deals with orthogonal flow. Whatever shrink-to-fit does in floats, tables or inline blocks it should do in flexbox.

Alex

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Tab Atkins Jr.
Sent: Thursday, February 24, 2011 3:52 PM
To: www-style list
Subject: [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 07:47:28 UTC