Owlcarousel2: Does not work with flexbox

[pflind]

The carousel overflows if you use flexbox, see demo at codepen.

overflow: hidden on .owl-stage-outer is not honored.

The ONLY browser that it works in is Safari.

Any ideas?

[daviddeutsch]

Check #1005 for progress on this. It'll arrive, eventually.

[pflind]

Maybe you were closing this issue too fast. Flexbox is not used on the owl carousel but on a parent container. Actually, the parent container can be 10 levels higher and the problem still exists.

1005 doesn't fix this bug.

[leandroruel]

this is not bug in the owl carousel by itself.

[leandroruel]

http://codepen.io/leandroruel/pen/ZOEbxz

[thomasfrobieter]

I can confirm this behavior. Set display:flex & flex-wrap:wrap on a parent div container, owl carousel located inside. If i disable display.flex inside the chrome console, the slider works - without a reload. @pflind did you found any solution to this problem?

[thomasfrobieter]

Ok, so i was able to fix the issue on my page. I think it´s not really related to the OWL Lib. Try to set flex-shrink:1; and max-width:100%; to all of your flexbox columns. For the moment, this works perfect for me, but i have to test this with other browsers.

[pflind]

I had to add a overflow-y: hidden; on the parent container. It is a bug in OWL and should be fixed. I also have a max-width on my parent container which OWL simply ignores.

[ababra]

@pflind's solution works great, applied it on a Foundation 6 flex-grid column

[winmodify]

Setting min-width: 0; on the container where the owl carousel is fixed it for me.

[hellor0bot]

@winmodify's solution worked for me. Thanks!

[selrond]

@pflind's solution worked for me, I second reopening this issue, as it's valid and hasn't been fixed.

[lorenaramonda]

hi guyz, for me worked converting flex-basis: 100% into width: 100% in the ancestor parent of owl.
Hope this could help...

[ddazal]

@lorenaramonda solution worked for me

[morganfeeney]

min-width: 100% on the parent works with grid.

[ollatech]

i still have problem with this. owl will not respect parent rule when use flex.
parent width will be wider than it supposed to be. JS need detect parent width when using flexbox.

[tiagocrt]

@winmodify Wow, I dont know why, but it works. Thank You a lot

[lmorelli986]

@thomasfrobieter 's solution worked for me

[smaillns]

Just do that .. in the flex children (rows\columns) add max-width: [YOUR flex-basis VALUE]%