Bug 178790 – fill-available height shouldn't change with "box-sizing: border-box"

• Component: Layout and Rendering
• Status: NEW

[Manuel Rego Casasnovas]

Created attachment 324819 [details]
Test to reproduce the issue

This is easily reproducible if you combine "height: -webkit-fill-avilable" with "box-sizing: border-box"
and the element has some border and/or padding.

Attached example to reproduce the issue. And current output, the expected result would be that both cyan boxes
(the one with "content-box" and the one with "border-box") take the whole height of their wrapper.
BTW this is working fine in Chromium/Blink.

[Manuel Rego Casasnovas]

Created attachment 324820 [details]
Current output

[Manuel Rego Casasnovas]

This was fixed past year in Blink:
https://codereview.chromium.org/2100463002/

[Ahmad Saleem]

Fixed in - https://chromium.googlesource.com/chromium/src/+/4820bd94507b69754af99a83b26a1cdcd936d134

[Ahmad Saleem]

*** WebKit ToT (295868@main) ***

box-sizing: border-box; <- does not match box-sizing: content-box;

*** Chrome Canary 139.0.7219.0 (Official Build) canary (arm64) ***

box-sizing: border-box; <- does match box-sizing: content-box;

*** Firefox Nightly 141 (20250605040737) ***

Does not work due to -webkit-fill-available.

[alan]

This boils down to WebKit not supporting simple content like

<div style="height: 20px; min-height: min-content">
  <div style="height: 50px"></div>
</div>