[csswg-drafts] [css-flexbox] Percentage height resolution of flex item children with indefinite flex basis (#6822)

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

== [css-flexbox] Percentage height resolution of flex item children with indefinite flex basis ==
For reference, this was filled after @davidsgrogan and me having different opinions in this [chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1255340).

This is the scenario
```
<div style="display: flex; flex-direction: column;">
  <div style="flex: 1 1 content; height: 100px; min-height: 0px;">
    <div style="height: 30px; width: 100px; background: blue;"></div>
    <div style="height: 100%; width: 100px; background: red;"></div>
  </div>
</div>
```

ToT Gecko and Blink size the red `<div>` with a percentage height as 0px while WebKit computes a 30px height. That computation happens in two steps
1. When computing the flex basis of the flex item we have to compute the content size. We have 30px for the first child and 0px for the second (as it's a percentage of an indefinite size). Summing up 30px. So far so good, all the engines agree with this
2. Then after computing the flex basis and resolving lines we proceed to layout. At this point there are two different interpretations of the current specs.

### Option 1 (Blink and Gecko)
@davidsgrogan cites the following text from the CSS2 specs

> If the height of the containing block is not specified explicitly (i.e., it depends on content height) [...] the value computes to auto.

and from that concludes that red's percent height computes to `auto` because the height of its containing block (i.e. the flex item) depends on content height. So because red's percent height computes to `auto`, the final height is its content height, which is 0px.

### Option 2 (WebKit)

In this case the engine considers that as the flex item is 30px height, then the div with the percentage height should be 30px as well.

I think the second option is the correct one for some reasons:
1. That CSS2 text was written way before flexbox, that's why I think the spirit of that paragraph was mainly to resolve the typical case of a box with an `auto` height having a child with a percentage height (and similar ones).
2. It's unclear to me that we could consider that the height of the containing block depends on the content height for the purpouse of resolving the percentage. It does indeed depend on the content height to compute the flex basis, but I don't think we could conclude that after computing the flex basis we should still consider the size as indefinite.

Anyway it's indeed controversial so I'll let more informed people to give their opinions.

**PS**: this affects 3 WPT tests
* css-flexbox/percentage-heights-016.html
* css-flexbox/percentage-heights-017.html
* css-flexbox/percentage-heights-018.html

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


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

Received on Thursday, 18 November 2021 09:09:52 UTC