Description
Compat Issues: yes
Description:
Percentage sizes used on direct-children of a table-cell require a second layout pass to be accounted for.
During the first layout pass, they can be resolved to "auto" but it seems people rely on a webkit-behavior where height:100% resolves as 0px in the first layout pass if the box is overflow:scroll/auto. It doesn't work in Firefox, but the fix for Firefox is to set a default height on the cell, then the percentage resolved based on that height. Edge having none of the bugs, we have webcompat issues. We would like to settle on either having Chrome/Safari bug fixed or standardize it.
Proposed Option:
During first pass, percentages are resolved as auto, except if they are height-related and used on a scrollable box, in which case they resolve as 0px. Edge changes its behavior, as well as Firefox once it fix the other bug.
CSS 2.1 Option:
They resolve as auto in all cases. Chrome and Safari change their behavior.
Other options:
We move to Firefox behavior where percentages resolve based on the specified height of the cell during the first pass (but the webcompat of this change is unknown).
Testcases:
https://jsfiddle.net/vmfrLzke/1/
Browsers Passing Test:
Blink/Webkit Pass
Gecko passes if you utilize the bug mentioned above which is how web devs work around this issue
Edge fails