display: flex prevent carousel to scroll

This codesandbox example doesn’t scroll well on latest chrome. I think it’s because of display: flex on container div.

It may be documented or bypassed.

[jeiea]

Yeah it’s good starting point and I got a hint from it. .embla__viewport { width: 100%; } was what I need.

I just started from this snippet and it misses width designation. It was my RTFM lesson but when I see the examples at first what hit my head was ‘do I really need all of them? It must be a showcase.’. So I started from that snippet.

I changed my thought .embla__viewport and .embla__container is necessary entirely. Anyway your example was helpful.

[davidjerleke]

Thanks for clarifying @jeiea. I understand what you mean now.

As you mention and have observed already, both the viewport with the overflow: hidden; and the container is necessary for Embla Carousel to work properly. And this is because the single wrapper approach would mean that each and every slide has to be animated in order to scroll the carousel (like keen-slider), as opposed to Embla Carousel which only animates one element (the container holding the slides). The single wrapper approach doesn’t scale well from a performance perspective, for example if you have a lot of slides, animating each and every one would cause a noticeable performance hit.

I hope my explanation makes sense.

Kindly David