Re: [csswg-drafts] [css-flexbox] Conflicting definitions of used cross size of a flex container (#5190)

> it would be nice to have a common "protocol" for how the inner and outer layout modes interact with each other

Sketch of what this could look like, to avoid having everything "patch" block layout like css2-tables do and also properly fix https://github.com/w3c/csswg-drafts/issues/4905:

1. The outer formatting context determines *available space* for each of the two axes. This is typically the size properties if definite (adjusted for `box-sizing` and the min and max size properties), and indefinite values resolved in a layout-mode-specific way. One of the two components (but not both, I think?) may be infinite. For a horizontal block-level an indefinite width becomes the containing block minus margins etc, and an indefinite height infinite.

2. We "run layout" in an inner-layout-mode-specific way for the contents of a box (this ignores fragmentation), with the given available space. This results in a laid-out subtree and a used size in both axes. For a horizontal block container the used width is the available width (which is why CSS 2 conflated these two concepts), the used height is the available height if finite, content-based otherwise.

3. Then the outer formatting context positions the box based on the used sizes it receives as part of that result. For horizontal block-level this means solving the "outer width = containing block width" equation *again*, this time with the used width, and resolving margins accordingly.

In CSS2 the general model is roughly that width are in input decided by parents, and height is an output based on children. In the model above two-dimensional available space is an input, two-dimensional used size is an output. This is also more compatible with orthogonal flows (writing mode change).

The Flex Layout Algorithm is already written this way, I assume to avoid special-casing row v.s. column flex containers in many places. Adopting this everywhere would be good, but this is a more substantive change than we may want to do normatively within CSS2…

-- 
GitHub Notification of comment by SimonSapin
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5190#issuecomment-643329880 using your GitHub account

Received on Friday, 12 June 2020 15:17:55 UTC