Re: [css3-flexbox] Computing the height of an auto-sized multicol element in a flex container

On Mon, Oct 1, 2012 at 2:56 PM, Daniel Holbert <dholbert@mozilla.com> wrote:
> I'm writing to get clarification what the expected rendering of a
> particular CSS-flexbox/CSS-multicolumn interaction should be.
>
> I think I've got the right interpretation, but I'd like clarification
> because my interpretation causes some wasted space, and also because
> webkit's implementation (in chrome dev channel) currently disagrees with me.
>
> SCENARIO:
> Suppose we have this multicol element, with four lines of text:
>
>   <div style="column-width: 20px; border: 1px dotted black">
>     1<br>
>     2<br>
>     3<br>
>     4
>   </div>
>
> Suppose we put that multicol element into a vertical flex container,
> with plenty of available width and height:
>
>   <div style="display: flex; flex-direction: column;
>               width: 300px; height: 300px;"></div>
>
> QUESTION:
> How tall should the multicol element be, as a flex item?  Should it be
> as tall as a single line of text, or as tall as 4 lines of text?
>
> MY ANSWER:
> According to the current spec, I believe the correct rendering is "as
> tall as 4 lines of text", even though its 4 lines end up going in
> separate columns after we've stretched in the (horizontal) cross-axis.
>
> This produces some wasted space and looks like this:
>
>    +--------------------+
>    |+------------------+|
>    ||1   2   3   4     ||
>    ||                  ||
>    ||                  ||
>    ||                  ||
>    |+------------------+|
>    |                    |
>    |                    |
>    |                    |
>    |                    |
>    +--------------------+
>
> JUSTIFICATION:
> Here's how I think we should go about getting the size.
> (a) We start out by getting the multicol element's "max-content" size
> (i.e. its size if it were "float:left"), and that's approximately 1em
> wide by 4em tall.  (This is from Flexbox spec section 9.2 item 3)
>
> (b) Then we resolve flexible lengths in the main axis (no-op in this
> case).  This gives us our *frozen* used main size. (the height)
>
> (c) THEN -- several steps later -- we handle "align-self: stretch", to
> determine the used cross size (the width).  I claim this should *NOT*
> affect the used main size (the height) -- we've already frozen that at
> ~4em, in an earlier step.
>
> SO -- does this make sense?  And do we want to change the spec to "fix"
> this (reduce the wasted space) at all?
>
> Webkit's implementation (in chrome dev channel) disagrees with me on
> this at the moment -- they render the multicol element as ~1em tall
> instead of ~4em, if it has "align-self: stretch".  (But if it has any
> other "align-self" value, then they agree with me and render it as
> skinny-and-tall.)
>
> Here's a live testcase (which only renders in browser builds that have
> "display: [vendorprefix-]flex" support):
> https://people.mozilla.com/~dholbert/tests/flexbox/multicol-as-flex-item-1.html

Hmm.  I think the problem is in multi-col's behavior, not Flexbox's.
Note <http://dev.w3.org/csswg/css3-sizing/#multicol-intrinsic>, where
the behavior of multicol with "max-content" is specifically called out
as needing some sort of special handling which is currently undefined.
 Flexbox provides all the necessary information - it tells it to size
itself under a max-content constraint, and tells it how much space it
has, so the multicol knows how many columns it is allowed to generate.

So, if I'm thinking about this correctly, the right behavior (assuming
we define width:max-content on multicols in a reasonable way) is
neither Firefox nor Webkit's behavior.  Webkit's behavior in
"align-self:stretch" is correct, but its "align-self: flex-end"
behavior is wrong - it should be the width of four columns, not one.

I don't think making all of them be 1 column wide and 4 lines tall is
justifiable - I think it implies a definition of "width: max-content;"
on multicol elements that is undesirable.

~TJ

Received on Monday, 1 October 2012 22:31:51 UTC