Safari - flex box container width with flex direction column

Asked Feb 03 '16 at 19:08

Active Feb 03 '16 at 19:47

Viewed 426 times

I am seeing an odd behavior with flex boxes on Safari when a flex column container is inside another flex row container. When column flex container has flex-wrap: wrap property set, it's width is greater than it's children. This behavior happens only on Safari, Chrome and Firefox it works as expected.

Codepen with flex wrap which has unexpected width for parent on Safari

Codepen without flex wrap where parent width is as expected

Safari version - 9.0.3

edited Feb 03 '16 at 19:47

asked Feb 03 '16 at 19:08

Jithin

1,108
2
12
26

http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Feb 03 '16 at 19:12
Please provide us with a complete example (HTML and CSS both) that reproduces the problem you're having. @Michael_B How is that relevant to this question? – Blazemonger Feb 03 '16 at 19:13
@Blazemonger, it tells the OP that Safari may require vendor prefixes for flexbox to work property. – Michael Benjamin Feb 03 '16 at 19:22
@Blazemonger here you go http://codepen.io/anon/pen/OMobNL , thanks to this now I can rephrase my question better. This happens when this parent is inside another container which has flex direction row. I am updating question as well. – Jithin Feb 03 '16 at 19:28
Also updated description with copepen without wrap which shows width as expected. – Jithin Feb 03 '16 at 19:43
What version of Safari are you using? – Michael Benjamin Feb 03 '16 at 19:44
This is on Safari 9.0.3 – Jithin Feb 03 '16 at 19:46

Safari - flex box container width with flex direction column

0 Answers0