Row Wrap in Flex-Box Not Wrapping in Safari

Flexbox row wrap not working in Safari

Do the same in .body as you did in the .header.

.container {  display: -webkit-flex;  display: flex;  -webkit-flex-direction: row;  flex-direction: row;  -webkit-flex-wrap: wrap;  flex-wrap: wrap;}
.container>div {  flex: 1;  -webkit-flex: 1 100%; /* safari fix */}

<div class="container">  <div class="header">    header  </div>  <div class="body">    body  </div></div>

flex-wrap not working as expected in Safari

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

This question has some info: https://stackoverflow.com/a/30792851/756329

Flexbox items don't wrap in latest Safari and Chrome (using max-width on flex-container and flex-basis on flex-items)

It seems that the issue is related to the initial image width that is considered to perform the calculation of the free space. Adding width:0 seems to fix the issue

div {
  display: flex;
  flex-wrap: wrap;
  max-width: 42em;
  padding-bottom: 1em;
}

img {
  max-width: 25em;
  width:0; 
  margin-bottom: 1em;
  flex-basis: 14em;
  flex-grow: 1;
}

<div style="">
  <img src="http://www.fillmurray.com/480/320">
  <img src="http://www.fillmurray.com/480/320">
</div>

Flex box row wrap not working in safari. Tried multiple prefixes?

This wasn't working thanks to the absence of

-webkit-flex: 1 1 15em;
-moz-flex: 1 1 15em;
flex: 1 1 15em;

in .flex-item.

Hence why it was working so well in chrome, but not firefox or safari. Chrome just gets this stuff, I suppose.

A great perk to this that solved another problem (kind of) is that now the images automatically resize themselves, in addition to moving. But have to tweak that a little more to be robust enough for the differences between mobile/web views

Safari flexbox text wrapping issue

I guess answer is much simpler then I thought ':D !!

Just change the following css and it should work B)

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 32px;
  background-color: #e99;
  margin: 32px;
  text-align: center;
  overflow-wrap: break-word;
}

Flexbox not wrapping as expected on Safari. What am I doing wrong?

Safari 7 requires -webkit prefixes for flexbox properties. http://caniuse.com/#feat=flexbox

You already have display: -webkit-box; on your ul but is another one that their version of Safari may want to use display: -webkit-flex;

Flexbox not working (wrapping) as expected in Safari

It looks like the issue is causes by the :before/:after pseudo elements being rendered as 'solid' or having some form of content. So setting width: 0; or content: normal; seems to resolve the issue.

So on the container the CSS (scss) would be:

.mosaic {
    @include clearfix;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 $vertical-spacing;
    padding-left: 0;
    width: 100%;

    &:before,
    &:after {
        content: normal;
    }
}

Hope that helps someone else! A very annoying and frustrating bug! :)

Flexbox not wrapping flex items

It seems that (as of today) the flex-flow property is one that isn't in on Firefox (at least the CR 2012 version).

You can see the wrapping in this fiddle working in Opera/Chrome, however.

Safari Nightly also has it functioning http://nightly.webkit.org

[edit] stupid Compass forgot the prefixes

References:

https://developer.mozilla.org/en-US/docs/CSS/flex
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

NB as of FF 21.0a1 it does not support flex-wrap

At least you can validate the property works:

http://jsfiddle.net/M7yLn/1/

Wrapping like a boss