Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[css-flexbox-1] 9.2. Line Length Determination Issue #11392

Open
gitspeaks opened this issue Dec 18, 2024 · 1 comment
Open

[css-flexbox-1] 9.2. Line Length Determination Issue #11392

gitspeaks opened this issue Dec 18, 2024 · 1 comment

Comments

@gitspeaks
Copy link

According to CSS Flexible Box Layout Module Level 1, 9.2. Line Length Determination (3)(C):

"If the used flex basis is content or depends on its available space, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing automatic table layout [CSS21]), size the item under that constraint. The flex base size is the item’s resulting main size."

Problems:

  1. It is unclear what constitutes a "used flex basis value that depends on its available space", as none seem relevant in this context aside from the value content.

  2. When a used flex-basis value is derived from a percentage that is resolved against an indefinite containing block (e.g., the flex container in this case), the resulting used value is content.

References:

  1. According to CSS Box Sizing Module Level 3:

    "intrinsic sizing keywords such as max-content are indefinite"

  2. According to CSS Flexible Box Layout Module Level 1, Section 7.2.3:

    "percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content."

However, in practice, when a flex-basis used value of content is derived from a percentage resolved against an indefinite size flex container, flex items are not consistently sized under the same constraint set on the flex container (e.g., max-content), as specified in 9.2(3)(c).

Test (Chrome and Firefox)

<!DOCTYPE html>
<style>
  body,
  html {
    height: 100%;
    margin: 0;
  }
  .flex {
    display: flex;
    flex-flow: row nowrap;
    width: max-content;
    background: red;    
  }
  .flex > div {
    background: green;    
    /* flex-basis: content behaves as expected. */    
    flex-basis: 50%;
  }
</style>
<div class="flex">
  <div>1234 56789</div>
</div>
@gitspeaks
Copy link
Author

Regarding point 4 in the same section:

Determine the main size of the flex container using the rules of the formatting context in which it participates. For this computation, auto margins on flex items are treated as 0.

It’s unclear why this step appears after calculating the flex base size and hypothetical main size of each item. Excluding the note about the automatic block size of a block-level flex container, this instruction seems more appropriate in point 2, as the flex container's definite main size establishes the available main space for the flex items. Perhaps the intention here is to determine the main size of an indefinite flex container based on the sum of the hypothetical main sizes of its flex items?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@gitspeaks