Re: [css-multicol][css-flexbox] column-fill + flex

"Tab Atkins Jr." <jackalmage@gmail.com> writes:

> On Wed, Feb 17, 2016 at 12:08 PM, Lea Verou <lea@verou.me> wrote:
>> I don’t usually relay my personal CSS frustrations to this list, but I think
>> I might have stumbled on a spec bug (and if not, certainly on a browser bug)
>> and I’m not familiar enough with the layout specs to exhaustively check
>> which of the two it is. Check my reduced testcase here [1] in both Blink &
>> Gecko. There are several issues there:
>>
>> 1. column-fill is not applied when the height is controlled via flex, but
>> only if set explicitly in an absolute unit.
>
> Browser bug in Blink.  There's no reason for column-fill to be ignored.
>
> (I don't think there's any bug around this in Gecko, is there? I don't
> see one from your testcase, at least.)
>
>> 2. When no height is set, Gecko is not applying multicol whereas Blink is
>> (just without column-fill: auto).
>
> Gecko is acting correctly. It *is* applying multicol, it's just only
> filling the first column, because you told it to fill sequentially and
> then didn't limit the height, so it can just put everything in the
> first column and never break.  Notice that in a sufficiently wide
> window there's still 2 or more columns, it's just that all but the
> first are empty.
>
>> Am I missing something here? I don’t see any such restrictions on [2].
>> In any case, I thought the use case could be of interest, as I don’t recall
>> many discussions about the combination of multicol & flex.
>
> Multicol shouldn't be all that interesting here; it *should* have a
> fairly well-defined and simple interaction with Flexbox.
>
> It looks like the problem is just that Blink auto-balances the columns
> unless the multicol has a definite height, which is incorrect
> behavior.  It does this in all situations, not just Flexbox.

Just one note here: Blink only supports the column-fill property if
experimental web platform features are enabled. But that's soon going to
change: https://codereview.chromium.org/1704883002/

Without that, the engine will behave as if column-fill were auto,
always. But that is what the test uses (column-fill:auto), so it doesn't
make much of a difference for this discussion. :)

In this test, Blink force-balances the columns, because it cannot see
that the height is constrained. And I DO think that that height is
unconstrained, especially since the height of the flexbox is auto.

Gecko seems to strictly honor column-fill auto, even if there's no
height to constrain the column height, so that you end up with one tall
column. In other words, Gecko follows the editor's draft of the multicol
spec, which contradicts the CR version, which says to only auto-fill if
the height is constrained somehow. Blink follows the CR version of the
multicol spec.

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------

Received on Thursday, 18 February 2016 10:13:14 UTC