Flex-Wrap Not Working as Expected in Safari

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 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>

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>

CSS3 - Flex wrap not working on IOS 10.1.1 Safari & Chrome

min-width doesn't work as intended on iOS, use flex-basis like this flex: 1 1 50%;

Src: https://bugs.webkit.org/show_bug.cgi?id=136041

Also, when using prefixed properties, you should always put them before the unprefixed version.

.tabs {  width: 100%;  display: -webkit-flex;  display: flex;  -webkit-flex-wrap: wrap;  flex-wrap: wrap;  box-sizing: border-box;}.tab {  border: 1px solid #3A3A3A;  color: #929292;  box-sizing: border-box;  -webkit-flex: 1 1 50%;  flex: 1 1 50%;  text-align: center;}

<div class="tabs">  <div class="gwt-HTML tab">1</div>  <div class="gwt-HTML tab">2</div>  <div class="gwt-HTML tab">3</div>  <div class="gwt-HTML tab">4</div>  <div class="gwt-HTML tab">5</div></div>

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 column wrap not working in latest Safari if children have min-width

After posting a bug and reaching out to the safari support team, it appears this was a bug specific to version 10.1.1 of safari. It has been fixed in subsequent releases.

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;

---

Related Topics