title: Slick slider not working in a flex container
body: <p>I'm trying to center vertically a slick carousel (<em><a href="http://kenwheeler.github.io/slick/" rel="noreferrer">http://kenwheeler.github.io/slick/</a></em>) in a column. So I use <code>display: flex; align-items: center;</code> on the column (container of the slick slider) but it breaks the slider.</p>
  
  <p>So I have try to center the carousel with an absolute position or by using flexbox but they both breaks the slick slider.</p>
  
  <p>I hope someone got a css/js/jquery solution for this issue :)</p>
  
  <p>Here a fiddle of the issue : <a href="https://jsfiddle.net/victor_allegret/g3dsd78w/" rel="noreferrer">https://jsfiddle.net/victor_allegret/g3dsd78w/</a> </p>
  
  <p>(sorry I have an issue adding slick to the stack overflow snippet)</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div class='flex-container'&gt;
  
   &lt;div class='single-item'&gt;
  
    &lt;div&gt;&lt;h3&gt;1&lt;/h3&gt;&lt;/div&gt;
    &lt;div&gt;&lt;h3&gt;2&lt;/h3&gt;&lt;/div&gt;
    &lt;div&gt;&lt;h3&gt;3&lt;/h3&gt;&lt;/div&gt;
    &lt;div&gt;&lt;h3&gt;4&lt;/h3&gt;&lt;/div&gt;
    &lt;div&gt;&lt;h3&gt;5&lt;/h3&gt;&lt;/div&gt;
    &lt;div&gt;&lt;h3&gt;6&lt;/h3&gt;&lt;/div&gt;
  
   &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>.flex-container {
   /* Using flexbox */
   display: flex;
   align-items: center;
   /*----*/
   margin: 0 auto;
   padding: 40px;
   height: 500px;
   width: 80%;
   color: #333;
   background: #419be0;
  }
  
  .slick-slide {
   text-align: center;
   color: #419be0;
   background: white;
  }
  </code></pre>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>$(".single-item").slick({
   dots: true
  });
  </code></pre>