W3C home > Mailing lists > Public > www-style@w3.org > October 2012

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

From: Daniel Holbert <dholbert@mozilla.com>
Date: Mon, 01 Oct 2012 14:56:49 -0700
Message-ID: <506A11A1.3070307@mozilla.com>
To: www-style list <www-style@w3.org>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Ojan Vafai <ojan@chromium.org>
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     ||
   ||                  ||
   ||                  ||
   ||                  ||
   |+------------------+|
   |                    |
   |                    |
   |                    |
   |                    |
   +--------------------+

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

Thanks,
~Daniel
Received on Monday, 1 October 2012 21:57:17 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT