Bug 172262
| Summary: | CSS Flexbox, flex-wrap property not working | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Dani Akash S <s.daniakash> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Critical | CC: | bfulgham, simon.fraser, zalan |
| Priority: | P2 | ||
| Version: | Safari 10 | ||
| Hardware: | All | ||
| OS: | All | ||
Dani Akash S
flex-wrap property is not working for two <div> elements inside a flexbox. It is not wrapping the div to new row even if the viewport size is not enough to display the two contents. Refer the following page:
https://daniakash.github.io/safari-webkit-flexbox-bug/
If the page is resized horizontally, the second <div> is not being wrapped to a new line. Source code for the above website is available at - https://github.com/DaniAkash/safari-webkit-flexbox-bug
Screenshots of the website in:
* chrome - https://raw.githubusercontent.com/DaniAkash/safari-webkit-flexbox-bug/master/images/chrome.png
* safari - https://raw.githubusercontent.com/DaniAkash/safari-webkit-flexbox-bug/master/images/safari.png
Tested it with Safari 10.0 and 10.1 on mac and Safari browser on iPhone with iOS version 10.1.1
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Brent Fulgham
Safari, Chrome, and Firefox seem to show identical behavior during resize. Do all browsers have a bug here?
Brent Fulgham
Given the age of this bug, I'm going to RESOLVE as WORKSFORME, but please REOPEN if you believe there is an ongoing issue.
zalan
(In reply to Brent Fulgham from comment #1)
> Safari, Chrome, and Firefox seem to show identical behavior during resize.
> Do all browsers have a bug here?
No, it's just you can't make the window size narrow enough to force wrapping on macOS. It works fine in responsive design mode when a small (narrow) enough device is selected.
I am going to go with config change here.