[csswg-drafts] [css-flexbox-1] 9.2. Line Length Determination Issue (#11392)

gitspeaks has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox-1] 9.2. Line Length Determination Issue ==
According to [CSS Flexible Box Layout Module Level 1, 9.2. Line Length Determination (3)(C)](https://www.w3.org/TR/css-flexbox-1/#algo-main-item):

> "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](https://drafts.csswg.org/css-sizing-3/#indefinite):

   > "intrinsic sizing keywords such as max-content are indefinite"
   
2. According to [CSS Flexible Box Layout Module Level 1, Section 7.2.3](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property):

   > "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)


```html
<!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>
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11392 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 18 December 2024 17:15:50 UTC