Bug 146310
| Summary: | Flexbox items don't stack if min-width is larger than flex-basis | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Zoë Bijl <webkit> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | bfulgham, simon.fraser |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Mac (Intel) | ||
| OS: | OS X 10.10 | ||
Zoë Bijl
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Zoë Bijl
This is still a problem in the newly released Safari 9.
Brent Fulgham
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.