Using slick inside of a flexbox element causes slick to grow exponentially

If you initialize a slick carousel inside of a flexbox element, then the slick carousel increases it’s width exponentially. The carousel ends up being extremely wide!

I know that flexbox is not quite ready for production, but Bootstrap 4 is shipping with the option to enable flexbox framework-wide. If this is something easy to fix, then perhaps it would be worthwhile to do so for us early adopters of Bootstrap 4 😃

http://jsfiddle.net/derekfoulk/x3Luhwqm/1/

Steps to reproduce the problem

1. Wrap your carousel element with an element
2. Set display: flex; on that element

What is the expected behaviour?

I expected the slick carousel to stay @ 100% width of the flexbox element.

What is observed behaviour?

The slider starts out much wider than the parent (flexbox) element, and continues to grow wider after each iteration of the carousel.

More Details

• I have verified this behavior on current & recent versions of Chrome, Firefox & Edge
• Using slick v1.6.0
• I’m unsure if this has worked as intended with previous versions of slick

[anrananran]

@alamowo , In fact, “overflow:hidden;” add to the “flex:1” div (not the “slick-slider” div) fixed this bug In my case.

[Oleksandr07]

for flexbox is solved by adding to the parent element { min-width: 0; }