- Load the attached testcase.
Lime rect, with no orange visible (all covered up).
Orange rect (the lime element is 0px tall).
This was reported to us by Chrome folks in https://bugs.chromium.org/p/chromium/issues/detail?id=1043071#c5
Some Chrome versions give expected results, some give actual results, as noted there (but they've changed to ultimately produce expected results in canary 81, I think).
Analysis of why the expected results are correct:
Here's my analysis:
(1) Looking at the outermost element, .tabs: it has an indefinite height (i.e. an indefinite cross-size).
(2) Looking at its child, .tab: it's a flex item in a horizontal flex container, and it eventually is considered to have a definite height (cross size) due to rule #3 of https://drafts.csswg.org/css-flexbox/#definite-sizes (which applies to that element as a flex item). So yes, .tab has a definite height for its final layout.
(3) Looking at its child, .content: it's a flex item in a vertical flex container, and its container is eventually considered definite as noted above, so rule #2 of https://drafts.csswg.org/css-flexbox/#definite-sizes does apply and the flex item is eventually considered definite.
(4) So the percent size in .chart should ultimately be resolvable.