Slider breaks when inside container with flex-grow

[MR-Mostafa]

Hi The slider breaks in containers where flex-grow is set to 1. In this case, this bug relates to #227 and #229.

Your solution

adding overflow: hidden; to your wrapper (.main) will fix the width calculation.

However, does not work when we use special slider configurations like perView: 3 Also I used slider.update({ slides: { perView: 3, spacing: 15 }}); but dosen't work correctly;

https://stackblitz.com/edit/keen-slider-flex-bug

[MR-Mostafa]

In addition, I cannot assign class overflow-hidden to a parent element. (flex-auto). However, I have given this class's overflow-hidden to its direct parent.

[MR-Mostafa]

also when i used overflow-hidden for flex-auto, It seems that there is another bug and that is calculates the number of slide items incorrectly.

update for calculate pagination:

(This bug occers when loop:false)

[welschmoor]

I have made the experience that keen-slider does not work well with tailwind. I remember I wanted to make the "div" that had the keen slider ref on it be relative and used the tailwind class relative and it did not work. Then I wrapped the slider with a relative div and it did not work. This was React and what worked is using style={{ position: "relative" }}. This may only affect React. top-2 left-4 did not work either, I had to use the style property.

[chimok]

@welschmoor The keen-slider.io website use tailwind. Problem is a container with flex or padding.