SolvedOwlCarousel2 Does not work with flexbox

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?

20 Answers

✔️Accepted Answer

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

Other Answers:

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.

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.

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

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.