1

I have a flex container with 5 items set to flex(1 1 20%). Each item has the same width (initially set to have 20% width of the container). All good.

.container {
    display: flex
    flex-wrap: wrap;
}

.item {
    flex: 1 1 20%;
}

I am expecting the items to wrap (see http://jsfiddle.net/edag6amx/4/), but I can't get it working under Safari or Chrome. Works well in FF and Edge.

If I change the item's flex-basis to auto (flex: 1 1 auto) it will start wrapping as expected.

Any suggestions please?

Thanks.

M.M.
  • 111
  • 5
  • Do you have an image of what you're expecting? On FF the 5th item goes under – romuleald Sep 02 '15 at 12:51
  • The wrapping is expexted. In my opinion the FF behaves correctly. Point is it does not wrap under Chrome. – M.M. Sep 02 '15 at 13:13
  • So the `flex: 1 1 25%;` is more accurate? – romuleald Sep 02 '15 at 13:26
  • It's not about the actual percentage (see this 50% example http://jsfiddle.net/edag6amx/6/) - point is that if you resize narrow enough the items will **not** wrap. – M.M. Sep 02 '15 at 13:40
  • 1
    For me, it's ok not to wrap. 20% * 5 = 100% -> they fit. Am i missing something ? – vals Sep 02 '15 at 13:55
  • I've tried this http://jsfiddle.net/edag6amx/7/ ul add `flex-flow: row wrap;` and on li `flex: auto;` – romuleald Sep 02 '15 at 14:00
  • @vals I should have emphasized that the wrapping is only expected if you narrow you browser enough. You are correct that it should not wrap if there is enough room. I though it to be obvious. – M.M. Sep 02 '15 at 14:08
  • @romuleald - yes, I have mentioned that in my original post, that setting to ```auto``` works. Problem with that is that as soon as you don't have same item content the width of the items will not be equal: http://jsfiddle.net/edag6amx/9/ – M.M. Sep 02 '15 at 14:11
  • Adding a min-width and flex auto looks like a solution? But it's not really flexible. I'm pretty sure that a solution exist, but still not explored. – romuleald Sep 02 '15 at 14:44
  • 2
    In Gecko they wrap because of the new `min-width: auto`. Webkit hasn't implemented it yet, so uses `min-width: 0`. Basically, you want the opposite of [How can I get FF 33.x Flexbox behavior in FF 34.x?](http://stackoverflow.com/q/26895349/1529630) – Oriol Sep 03 '15 at 01:21

1 Answers1

0

Have flex-shrink set to 0

.container {
    display: flex
    flex-wrap: wrap;
}

.item {
    flex: 1 0 20%;
}
Carol McKay
  • 2,438
  • 1
  • 15
  • 15