CSS height: 100%; not being calculated properly.

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Nathan Hammond]

Steps to reproduce the problem:
Reduced test case: http://emberjs.jsbin.com/nosap/1

Note that the height of the page is 40px taller than the screen.

What is the expected behavior?
`main > *` should be set to height 100% of their parent container.

What went wrong?
`main > *` is set to the height of `.application` (two levels up) or maybe the body..

Did this work before? N/A 

Notes:
- Firefox renders this correctly.
- Also reported to chromium/blink: https://code.google.com/p/chromium/issues/detail?id=359612, this is a before-the-fork issue.

[Nathan Hammond]

(Whether or not this is a difference from the spec is up for debate. However, it is at the least an inter-op difference.)

[Ahmad Saleem]

Chrome / Blink fixed it in these commit:

https://src.chromium.org/viewvc/blink?view=revision&revision=183654

https://chromium.googlesource.com/chromium/src.git/+/220f5e290a7fd00c76bf7050f717050e46f0c444

I am not sure whether this bug is fixed or not but just wanted to add more context and details. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/98934777>

[Ryan Reno]

There's no difference rendering the repro case between Safari 16 beta, Chrome 104, and Firefox 103.

It looks like the Chromium patch from 2014 was reverted as it caused other regressions.

In the mean time, all three browsers appear to have converged with respect to this layout. This bug was from before flexbox was fully supported and from before the first W3C CR for the css-flexbox module. Given that all three engines render the page the same I don't think there's any work to be done here.

I'm going to mark this fixed, configuration changed. It's likely at the time of the bug the engines just didn't agree with how flex was supposed to work.