Bug 206575 - Fixed flex-basis value on element wrapped within a flex box behaves as max-height
Summary: Fixed flex-basis value on element wrapped within a flex box behaves as max-he...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/saltas888/pen/wvBRRoP
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-01-22 03:07 PST by d.saltaferis
Modified: 2022-10-27 13:48 PDT (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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!