NEW289876
`position: absolute` with inner `max-height: 100%` makes `height: max-content` resolve to 0 
https://bugs.webkit.org/show_bug.cgi?id=289876
Summary `position: absolute` with inner `max-height: 100%` makes `height: max-content...
Benoît Rouleau
Reported 2025-03-16 15:35:26 PDT
Created attachment 474584 [details] Test case See the attached test case and compare the result between Chrome, Firefox, and Safari. Only Safari doesn't show the red background (indicating that the box has a 0 height). What makes me think it's a bug is that if you remove the `position: absolute`, the height is the same as other browsers; I don't think the height of an element should ever be affected by whether it is absolute-positioned (unless it's the child of a flex or grid container that stretched it, but it's not the case here).
Attachments
Test case (574 bytes, text/html)
2025-03-16 15:35 PDT, Benoît Rouleau 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2025-03-16 22:25:26 PDT
confirmed. Firefox and Chrome have a red background <div class="box"> <div class="box-inner">This text should have a red background.</div> </div> .box { background-color: red; height: max-content; position: absolute; } .box-inner { max-height: 100%; } # HEIGHT Safari: body: 0 .box: 0 .box-inner 0 Firefox: body: 0 .box: 19.2px .box-inner: 19.2px Chrome: body: 0 .box: 18.5 .box-inner 18.5
Radar WebKit Bug Importer
Comment 2 2025-03-18 11:20:19 PDT
<rdar://problem/147333178>
Note You need to log in before you can comment on or make changes to this bug.