I'm having trouble with the Slick carousel JS plugin with multiple slidesToShow which have different heights.

I need the Slides to have the same height, but with CSS flex-box it doesn't work as the slides have conflicting CSS definitions.

Also, I didn't find anything useful in the forums and on the web.

HTML

<div class="slider">

  <div class="slide">

    <p>Lorem ipsum.</p>

  </div>

  <div class="slide">

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>

  </div>

  <div class="slide">

    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

  </div>

  <div class="slide">

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

  </div>

</div>

JS

$('.slider')

.slick({

    autoplay: false,

    dots: false,

    infinite: false,

    arrows: false,

    slidesToShow: 2,

    slidesToScroll: 2,

    rows: 0

});

CSS

.slide {

  height: 100%;

  background-color: #ccc;

  padding: 10px;

}