Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column wrap is behaving differently in safari and in chrome. #102

Closed
vishal9p opened this issue Jun 22, 2017 · 1 comment
Closed

Column wrap is behaving differently in safari and in chrome. #102

vishal9p opened this issue Jun 22, 2017 · 1 comment

Comments

@vishal9p
Copy link

vishal9p commented Jun 22, 2017

I have a codepen designed where i have used column wrap for aligning the items.
CodePen Link:----->(below)

Steps to reproduce the issue:
Open the above codepen link in chrome and in safari,we can see the difference in the alignment(Attached the screen-shot).
SAFARI:->
In case of safari browser there is a extra space between the flex container and the flex items where the column wrap is applied.The width of the flex container is more than the children.
CHROME:->
In case of chrome browser there is no extra space between the flex container and the flex items where the column wrap is applied. The width of the flex container is exactly equal to the the children.That is there is no space between the flex container and flex item where this column wrap is applied.

**Now i am bit confused which behaviour is actually correct the chrome one or the safari.**Please clarify this.Using flex-direction:column instead of column wrap fixes the issue but i have to use column-wrap i cannot use column as the flex-direction.Also flex-grow:1 is not a valid solution.

So which behaviour is correct the chrome one, where the flex container takes width exactly equal to to their children or the safari one , where the width of the flex container is bit more than the child items.please clarify this and also provide the fix if any exist.

Snapshot of codepen in SAFARI:
safari snapshot of codepen

Snapshot of codepen in CHROME:
chrome snapshot of codepen

(The issue can be seen visually by confirming the width of the items in the blue border.) The Gap beween the blue border and the green border is expected(thats why flex-grow:1 is rejected solution).
Also in actual code where this codepen is used i have added the vendor prefixes for the flex(so thats not a issue)

@philipwalton
Copy link
Owner

I'm not sure why this issue was filed in this repo, as it doesn't seem to have anything to do with the demos here.

If you've found a browser bug then you should file an issue with the relevant browser. Here's some good info on how to do that: https://developers.google.com/web/feedback/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants