Responsiveness breaks when parent has `display: flex`

It’s all in the title pretty much 😃

Here’s a demo: https://codesandbox.io/s/morning-thunder-hcdl5

Make the preview smaller and pretty soon you’ll see the carousel stop being responsive and instead causing a horizontal scrollbar.

Is this something that should be fixed in this component, and/or is there a way I can work around it in my own code? (While still keeping display: flex of course)

Here’s a screenshot. That horizontal scrollbar should not be there, there is plenty of room left for the carousel to shrink to fit.

[renancleyson-dev]

You nested a flex container inside another flex container in your example. It will work properly if you remove the div that is wrapping the Carousel component or the one that is wrapping the sidebar and carousel, but if you want it as it is in your example, then you are handling the same problem of the issue. So you need to set min-width to some value rather than auto in the inner flex container.

[renancleyson-dev]

The problem is that at some point the carousel as a flex item will shrink to its minimum content size, which is the carousel items content without any free space, so adding a lot of items will make the carousel larger, and eventually, it will break the responsiveness. This explains why adding the infiniteLoop flag breaks the carousel since it renders clones of the last and first item inside the carousel.

The solution is changing the minimum width to 0 instead of the minimum content size(auto) in the outer div of the component. Here’s an example of how you can do it: https://codesandbox.io/s/sleepy-greider-64ed2?file=/src/index.css