Skip to content

[css-flexbox-1] When can available space for flex items be infinite? #6476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
andyjakubowski opened this issue Jul 27, 2021 · 3 comments
Closed
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Response Pending css-flexbox-1 Current Work

Comments

@andyjakubowski
Copy link

I’m implementing Step 2: determine the available main and cross space for the flex items, and I’m trying to better understand what constitutes definite and indefinite sizes, and by extension definite and infinite available space.

CSS Box Sizing Level 3 defines definite size as:

A size that can be determined without performing layout; that is, a , a measure of text (without consideration of line-wrapping), a size of the initial containing block, or a or other formula (such the “stretch-fit” sizing of non-replaced blocks [CSS2]) that is resolved solely against definite sizes.
Additionally, the size of the containing block of an absolutely positioned element is always definite with respect to that element.

It wasn’t clear to me if intrinsic sizes counted as definite, and after some digging found [css-sizing] definite sizes and shrink-wrapping and the WG resolution saying that:

treat intrinsic sizes as definite when they don't rely on layout, by default

Approaching this from another angle, I tried to think if situations where the available space could possibly be infinite. These are the cases I was able to identify:

  • flex container block-size computes to auto, and the flex container participates in flow layout
  • flex container block-size computes to a <percentage>, and the containing block’s block-size depends on content; this creates a cyclic dependency, so <percentage> behaves as auto

Interestingly, I wasn’t able to think of one situation where the available space in the inline dimension of the flex container would ever be infinite. Even in orthogonal flows the inline size of the flex container seems to be resolved against a fallback size defined in Available Space in Orthogonal Flows. I was unable to reproduce the case where the flex container would lay its box out at its max-content size when given “infinite available inline space” as described in Auto-sizing Other Orthogonal Flow Roots.

So I have two questions:

  • is there a finite list of cases where available space for flex items can be infinite? Is my list correct?
  • alternatively, how should one interpret phrases like “performing layout”, or “real layout” when trying to identify definite sizes which shouldn’t rely on layout?
@tabatkins
Copy link
Member

You're right that there's no situation in which the flexbox will see an infinite inline available space, due to the WM clamping rule.

For the block axis, available space is infinite for laying out block-level boxes inside indefinite block containers, and this gets passed through to descendants for their initial layout pass.

@tabatkins tabatkins added Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Response Pending labels Aug 12, 2021
@fantasai
Copy link
Collaborator

Re-opening to wait for commenter response. :) @andyjakubowski let us know if this answers your question, or if you have follow-up questions.

@fantasai fantasai reopened this Aug 12, 2021
@andyjakubowski
Copy link
Author

@tabatkins’s answer helped clarify my understanding. I think I get it now. Thanks for double checking, though, @fantasai 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Response Pending css-flexbox-1 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants