Slick: wrong width calculation

[codingleo]

I'm just trying to put some complex html elements inside a section whose has it's class loaded by jquery + slick, however it loades the children elements with wrong widths.

====================================================================

[ https://codepen.io/leodsgn/pen/zzKdeg ]

====================================================================

Steps to reproduce the problem

1. Load jquery + slick in html
2. Created a section with class ".services-featured__grid" with some blocks inside of it that should be the information cards that would be the slider items
3. Loaded the class in jquery followed by the slick function and configurations
4. Got the error

====================================================================

What is the expected behaviour?

Have a simple slides with the items inside the section ".services-featured__grid".

====================================================================

What is observed behaviour?

Looks like the slider calculation is wrong and the items have it's width reduced and put one above the others.

====================================================================

More Details

• Which browsers/versions does it happen on?
  Google Chrome #latest + Safari #latest
• Which jQuery/Slick version are you using?
  jquery 3.2.1
  slick.js 1.6.0
• Did this work before?
  In a simple div with images inside, it works fine!

[codingleo]

Ok. Looks like it's working now for 2 reasons:

1. Removed the display: flex from my CSS
2. Added the slick.css instead of slick-theme.css (or keep both)

Now everything works fine.