Row Wrap in flex-box not wrapping in Safari

Related searches

A flex container has four children, each with a flex-basis of 25% an a min-width. flex-flow is set to row wrap. Browsers other then Safari handle this as expected: if the min-width is reached, it wraps the the next item to the next row. In Safari it overflow the container.

See demo here: http://codepen.io/lbilharz/pen/aJbkI

JADE

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

Stylus

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

Any ideas?

Per a comment on bugs.webkit.org, it seems the solution is simple!

If your style is

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

you just need to add more explicitness to your flex declaration. In fact, I think only one line needs to change like so

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
} 

flex-wrap not working as expected in Safari, If I disable -webkit-flex-wrap (effectively setting it to nowrap), all boxes line up in a row but eventually overflow the container when the browser� Still not seeing the same level of support of the flex-wrap property on mobile as there is on desktop. Modern Desktop browsers nicely wrap flexed width/height items using min width and height. However, modern mobile browsers appear to require more explicit dimensions in order to get the wrapping working.

I'm using a max-width on my flex items, so I was able to solve this by explicitly setting the max-width within the flex property:

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
li {
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;
}

Display:flex and flex-wrap:wrap breaking layout in safari only , .page-id-57 .row { display: -webkit-flex; /* Safari */ -webkit-flex-wrap: wrap; /* Safari The issues with layout and flexbox appear sitewide when I This is my code now, still not sure what I am doing wrong? footer and sidebar� Row Wrap in flex-box not wrapping in Safari. 53. flex-wrap not working as expected in Safari. 1. Flex box row wrap not working in safari. Tried multiple prefixes? 3.

This is a Safari IOS bug. So the fix / workaround is to set the flex-basis to an explicit width rather than auto for child element.

Flex Row last item Wraps to next line on Safari - Support, These columns need to wrap on smaller display sizes to display properly. So I've added some CSS to the row to acomplish just that (… On passing the value wrap-reverse to the property flex-wrap, the elements of the container are arranged horizontally from left to right as shown below. The following example demonstrates the result of passing the value wrap-reverse to the flex-wrap property. Here, we are creating six boxes with different colors with the flex-direction value row.

Please, note that not all prefixers work the same way, so there's known issues on every prefixer that puts you in need to manually add some vendor prefix. Don't rely on blind-trusting on prefixers or automated software unless you checked it works hundred percent in your project.

For detailed flex bugs, please refer:

https://caniuse.com/#feat=flexbox

https://github.com/philipwalton/flexbugs

As Joseph Hansen pointed out, including width property as third param on flex declaration is the desired workaround for flex and it should fix most of issues derived from merging flex with some declarations.

But this doesn't solve all issues on safari, or even other browsers; it sometimes will depend on childrens or some other property; in the example below, you'll see the middle box growing more than usual, even when all three elements are supposed to keep same width ON SAFARI. If you use chrome, it will look pretty nice.

This is not a flex issue but a display interpreter one. Simply removing display: inline-table will fix the issue for safari, but, with more child elements, it will make all cards grow in height, so we'll need to fix this other behaviour derived from switching to another display property.

.flexrow {
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0px -15px;
}
.card-container {
  display: inline-table;
}
div.card-container {
  -webkit-flex: 0 1 calc(33.3333% - 30px);
  flex: 0 1 calc(33.3333% - 30px);
  margin: 15px;
}
.card-container {
  background:green;
}
<div class="flexrow">
  <div class="card-container">
      <div class="card">
        <p class="title">
          test test test
        </p>
      </div>
    </div>

    <div class="card-container">
      <div class="card">
        <p class="title">
          test testtesttest test test test
        </p>
      </div>
    </div>

    <div class="card-container">
      <div class="card">
        <p class="title">
          test test
        </p>
      </div>
    </div>
</div>

flex-wrap, The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be� Default value. Specifies that the flexible items will not wrap: Play it » wrap: Specifies that the flexible items will wrap if necessary: Play it » wrap-reverse: Specifies that the flexible items will wrap, if necessary, in reverse order: Play it » initial: Sets this property to its default value. Read about initial: Play it » inherit

Some browsers do not fully support all the CSS3 elements. Try this:

  display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

flex-wrap, The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. laid out in a single line which may cause the flex container to overflow. Inherited, no Opera Full support 17, Safari Full support 9. An initial setting of a flex container is flex-wrap: nowrap. This means that when you create a flex container (by applying display: flex or display: inline-flex to an element) all child elements ("flex items") are confined to a single line. To enable flex items to wrap use flex-wrap: wrap.

Vertically aligns the flex items when the items do not use all available space on the cross-axis: flex-wrap: Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line: align-content: Modifies the behavior of the flex-wrap property.

Setting column-reverse and wrap element { /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */ flex-flow: column-reverse wrap; }

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Comments
  • It seems to be a Webkit-Bug, see bugs.webkit.org/show_bug.cgi?id=136041
  • ever find a workaround?
  • Thank you for your comment, it helped me to understand flex-basis some more. You could also omit min-width and write -webkit-flex: 1 0 15em; flex: 1 0 15em;.
  • thanks for your reply, but if you take a look at the codepen, you will see that the vendor-prefixes are added automatically.