[csswg-drafts] [css-flexbox] Percentage height resolution against indefinite containing block size inside nested flex box. (#9506)

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

== [css-flexbox] Percentage height resolution against indefinite containing block size inside nested flex box. ==

``` HTML
<div style="background:red;display:flex;flex-direction:column;height:400px;width:400px">
  <div style="background:blue;display:flex;">
    <div style="background:green;width:200px;height:50%">
    </div>
    <div style="background:yellow;width:50%;width:200px;height:200px">
    </div>
  </div>
</div>
```
In the above case, I think the blue <div> is the containing block of the green <div> and the height of the blue <div> is decided by its content size. The height of the green block is percentage and creates a cyclic percentage dependency which I think should follow the description here [https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution](https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution):

> If the cyclic dependency was introduced due to a block-size or max-block-size on the containing block that causes it to depend on the size of its contents, the box’s percentage is not resolved and instead behaves as auto.

If I'm not getting this rule wrong, the height of the green <div> should be zero in this case.

However, I tested with Blink, Gecko and Webkit. The heights of green <div> are all 100px. And if I remove the height specification on the red <div>, the heights  of green <div> become zero.
* please tag the issue title with the spec's shortname, like `[css-foo]`
  (this is the name from the spec URL, without a level number unless the issue is specific to that level).
  If you're proposing a new feature that doesn't obviously fit in an existing spec, skip this part — don't make something up.

* please be specific (in the title and issue) about what you want to change:
  “make it better” means different things to different people!

* please link to the spec section you're talking about, or at least the spec


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


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

Received on Friday, 20 October 2023 10:16:41 UTC