title: React-slick not working on first render
body: <p>I tried react-slick with dynamic children but it don't work as it should be, the height on first render was coming as some 176px but If I try to resize the browser then it works and the height changes to 514px. I thought may be I force my component to render one more time but it didn't work. I tried to replicate the issue but getting some other issue there. </p>
  
  <p>Take a look at the <a href="https://jsfiddle.net/sourabhgarg/sbdm4b4o/" rel="nofollow noreferrer">fiddle</a> </p>
  
  <pre><code> var Item = React.createClass({
   render: function() {
   return ( &lt; div &gt; &lt; p &gt; kitten pic &lt; /p&gt;&lt;br/ &gt; &lt; img src ='http://placekitten.com/g/400/200' / &gt; &lt; /div&gt;)
   }
   });
  
  var ReactSlickDemo = React.createClass({
  render: function() {
  var settings = {
    dots: false,
    vertical: true,
    autoplay: true,
    autoplaySpeed: 6000,
    arrows: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    touchMove: false,
    swipeToSlide: false,
    swipe: false
  }
  return ( &lt; div className = 'container' &gt;
    &lt; Slider {...settings
    } &gt;
    &lt; Item / &gt;
    &lt; Item / &gt;
    &lt; Item / &gt;
    &lt; /Slider&gt; &lt; /div&gt;
   );
   }
  });
  
   ReactDOM.render( &lt; ReactSlickDemo / &gt; ,
   document.getElementById('container')
    );
  </code></pre>