CODEWITHSUNDEEP
cssflexbox
Adam
Adam

Reputation: 33146

CSS Flexbox: what is the (algorithm for / definition of) "hypothetical cross size"?

From the specification, almost everything in the layout algorithm is defined, but this item seems to be missing.

Paragraph 9.4.7: https://www.w3.org/TR/css-flexbox-1/#algo-cross-item - says:

"Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto as fit-content."

However "performing layout" is undefined -- it's what this paragraph is supposed to define, and instead it just ... recursively defines itself?

By contrast, the previous section (for Main Size) explicitly defines the algorithm for "perform layout". But the algorithms for Main and Cross must necessarily (almost by definition?) be (at least slightly!) different.

I'm debugging some detailed Flexbox code, and questions over "what, exactly, is the correct behaviour for cross-size layout?" are proving difficult to answer when I can't find an unambiguous section of the spec for this.

Upvotes: 1

Views: 489

Answers (1)

Adam
Adam

Reputation: 33146

Ultimately, and with extensive testing in browsers, I came to the conclusion it means something like:

Do the undefined, arbitrary, parts of this specification, in whatever way you - the implementer - think is 'good'

i.e. there isn't a specification here. (officially: 'whatever the browsers do' is correct, but of course: what they do changes over time, and has its own bugs)

In particular: there's a big hole in CSS spec, which is "what is the size of an element?"; it's explicitly unexplicit, with 'suggestions' offered for what the sizes of various elements 'might' be. e.g. a PNG image could, perhaps, use its raw pixel width and height (but should you be following retina sizes, real sizes, points vs pixels, etc? And what should an SVG do? There's several arguably-correct answers to each of these).

... which I think is why the spec leaves this space blank.

Ultimately I found the best results by implementing a sensible set of heuristics for intrinsic sizes for elements, then using them here with the available meta info, constraints, etc. This fit most closely with what browsers were doing, and gives good results.

Upvotes: 1

Related Questions