NEW178790
fill-available height shouldn't change with "box-sizing: border-box" 
https://bugs.webkit.org/show_bug.cgi?id=178790
Summary fill-available height shouldn't change with "box-sizing: border-box"
Manuel Rego Casasnovas
Reported 2017-10-25 07:20:38 PDT
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.
Attachments
Test to reproduce the issue (530 bytes, text/html)
2017-10-25 07:20 PDT, Manuel Rego Casasnovas 		no flags
Details
Current output (8.79 KB, image/png)
2017-10-25 07:20 PDT, Manuel Rego Casasnovas 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Manuel Rego Casasnovas
Comment 1 2017-10-25 07:20:55 PDT
Created attachment 324820 [details] Current output
Manuel Rego Casasnovas
Comment 2 2017-10-25 14:45:16 PDT
This was fixed past year in Blink: https://codereview.chromium.org/2100463002/
Ahmad Saleem
Comment 4 2025-06-05 05:31:50 PDT
*** 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
Comment 5 2025-06-05 11:28:28 PDT
This boils down to WebKit not supporting simple content like <div style="height: 20px; min-height: min-content"> <div style="height: 50px"></div> </div>
Note You need to log in before you can comment on or make changes to this bug.