[css-flexbox-1] 9.2. Line Length Determination Issue #11392
Description
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:
-
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. -
When a used
flex-basisvalue 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 iscontent.
References:
-
According to CSS Box Sizing Module Level 3:
"intrinsic sizing keywords such as max-content are indefinite"
-
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>