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:
> Hi www-style,
>
> 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     ||
>    ||                  ||
>    ||                  ||
>    ||                  ||
>    |+------------------+|
>    |                    |
>    |                    |
>    |                    |
>    |                    |
>    +--------------------+

Okay, fantasai and I have spent some time working through this example
today, and we think we have a different solution.  We've captured it
in the Sizing draft
<http://dev.w3.org/csswg/css3-sizing/#multicol-intrinsic>.

What we discovered is that, given your preferred definition of what
"width: max-content;" means on a multicol, you actually end up with a
1em by 1em (approx.) flex item, with the content overflowing.  This is
the opposite of what you thought - there's not nearly enough space!
This is because the height (main size) of the flex item is calculated
assuming layout into the available space.  (Note that step 3 of the
layout algorithm treats ''auto'' as ''max-content'' for its *flex
basis*, which in this case is its height.  Its width does its normal
''auto'' behavior.)

So, after step 3, you have a hypothetical main size of approx 1em
tall.  This resolves to a used main size of the same.  Then, step 7
does layout into the available space and the used main size, treating
''auto'' cross size as ''fit-content''.  ''fit-content'' = available
space, clamped between min-content and max-content.  Since your
definition of max-content is approx 1em in this case, the hypothetical
cross size is thus 1em.

Then, in this particular case, it'll get stretched, giving you a
full-width multicol with no wasted space, but in the non-stretch
cases, you're stuck with a 1em by 1em multicol and lots of overflow.

Instead, we've defined max-content carefully so that a multicol will,
in any possible case, size itself less than or equal to the
max-content size.  This makes your case and others work correctly,
with a minimum of extra layout work.

Thoughts? Could you sanity-check our work?

~TJ and fantasai

Received on Tuesday, 9 October 2012 20:25:35 UTC