Bug 289876

Summary: `position: absolute` with inner `max-height: 100%` makes `height: max-content` resolve to 0
Product: WebKit Reporter: Benoît Rouleau <benoit.rouleau>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=264448
Attachments:
Description Flags
Test case none

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.