Bug 146310 - Flexbox items don't stack if min-width is larger than flex-basis
Summary: Flexbox items don't stack if min-width is larger than flex-basis
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.10
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-06-25 02:26 PDT by Zoë Bijl
Modified: 2022-07-14 14:17 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Zoë Bijl 2015-06-25 02:26:10 PDT
Problem:
When flexbox items are given a min-width that is larger than its flex-basis, they don't stack when they don't fit horizontally. It doesn't seem to matter whether flex-flow is set to any combination of row and wrap (row, row-reverse, wrap, and wrap-reverse). Flex-grow and flex-shrink don't have an impact on the stacking.

Expected result:
Flexbox items should stack when they don't fit horizontally.

Testcase: 
http://codepen.io/Michiel/pen/b44eb081417fc226c794c8772eb8801e?editors=110

Use-cases:
Automatic float based fallback for browsers that don't support flexbox, see this pen: http://codepen.io/heydon/pen/doZJXz/?editors=110
Comment 1 Zoë Bijl 2015-10-20 01:19:24 PDT
This is still a problem in the newly released Safari 9.
Comment 2 Brent Fulgham 2022-07-14 14:17:38 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.