Bug 206575

Summary:	Fixed flex-basis value on element wrapped within a flex box behaves as max-height
Product:	WebKit	Reporter:	d.saltaferis
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED CONFIGURATION CHANGED
Severity:	Normal	CC:	ahmad.saleem792, bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari Technology Preview
Hardware:	Mac
OS:	macOS 10.14
URL:	https://codepen.io/saltas888/pen/wvBRRoP

Description d.saltaferis 2020-01-22 03:07:48 PST

When using fixed pixels flex-basis on an element with flex-direction: row which is wrapped within a flex box, the flex-basis value behaves as max-height for that element, no matter what it's child is.

Test case: https://codepen.io/saltas888/pen/wvBRRoP

Work-around: Use width instead of flex-basis

Comment 1 Radar WebKit Bug Importer 2020-01-22 23:18:29 PST

<rdar://problem/58825822>

Comment 2 Ahmad Saleem 2022-10-27 13:48:28 PDT

I am unable to reproduce this issue in Safari 16.1 using CodePen from Comment 0 and it shows "blue" container in height similar to section child matching in rendering with other browsers (Chrome Canary 109 and Firefox Nightly 108).

Since all browsers are matching with each other, I am marking this as "RESOLVED CONFIGURATION CHANGED" assuming it is fixed along the way.

Please reopen with updated testcase, if it is still reproducible. Thanks!