Row Wrap in flex-box not wrapping in Safari

by

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

More Related Contents:

  1. Fill remaining vertical space with CSS using display:flex
  2. Flex / Grid layouts not working on button or fieldset elements
  3. How does flex-wrap work with align-self, align-items and align-content?
  4. Flex-box: Align last row to grid
  5. Text in a flex container doesn’t wrap in IE11
  6. Equal height rows in CSS Grid Layout
  7. How to make flexbox items the same size?
  8. Align 3 unequal blocks left, center and right
  9. How can I align one item right with flexbox?
  10. My position: sticky element isn’t sticky when using flexbox
  11. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  12. Every item to have the same width as the widest element [duplicate]
  13. How can I make a div span multiple rows and columns in a grid?
  14. Flexible box model – display : flex, box, flexbox? [duplicate]
  15. firefox overflow-y not working with nested flexbox
  16. Are flex items block level element?
  17. Bootstrap change order of columns
  18. How to specify an element after which to wrap in css flexbox? [duplicate]
  19. CSS3 Flexbox: display: box vs. flexbox vs. flex
  20. Flex auto margin not working in IE10/11
  21. How to force re-render after a WebKit 3D transform in Safari
  22. Height of flex container not working properly in Safari
  23. How can I remove the gloss on a select element in Safari on Mac?
  24. Prevent flex items from overflowing a container
  25. How do I make flex box work in safari?
  26. Vertically center items with flexbox
  27. How to fix unexpected column order in bootstrap 4?
  28. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  29. How to exclude the first item in a flexbox wrap?
  30. Horizontal masonry layout with flexbox CSS only [duplicate]

Leave a Comment