title: Slick carousel - force slides to have the same height
body: <p>I'm having trouble with the Slick carousel JS plugin with multiple <strong>slidesToShow</strong> which have different heights.</p>
  <p>I need the Slides to have the <strong>same height</strong>, but with CSS flex-box it doesn't work as the slides have conflicting CSS definitions.</p>
  <p>Also, I didn't find anything useful in the forums and on the web.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;slider&quot;&gt;
    &lt;div class=&quot;slide&quot;&gt;
      &lt;p&gt;Lorem ipsum.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slide&quot;&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slide&quot;&gt;
      &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slide&quot;&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>$('.slider')
  .slick({
      autoplay: false,
      dots: false,
      infinite: false,
      arrows: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 0
  });
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.slide {
    height: 100%;
    background-color: #ccc;
    padding: 10px;
  }
  </code></pre>