title: react-elastic-carousel dynamic itemsToShow depending screen size
body: <p>I'm using react-elastic-carousel in vertical mode. Items in there have a fixed height. I would like the number of items to show to be dependend on the available space on the screen.</p>
  <p>In my App.tsx:</p>
  <pre><code>&lt;div className=&quot;App-body&quot;&gt;
    &lt;Carousel verticalMode itemsToShow={1}&gt;
      {state.items.map((item, index) =&gt; &lt;Item key={index}&gt;{item.text}&lt;/Item&gt;)}
    &lt;/Carousel&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://sag1v.github.io/react-elastic-carousel/verticalMode" rel="nofollow noreferrer">https://sag1v.github.io/react-elastic-carousel/verticalMode</a></p>
  <p>Item.tsx</p>
  <pre><code>import styled from 'styled-components';
  
  export default styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
    background-color: #683bb7;
    color: #fff;
    margin: 15px;
    font-size: 4vw;
  `;
  </code></pre>
  <p>At this point I'm not sure how to handle this at all. Somehow the component has to get the height of its parent element, know how height the items will be and calculate a number that fits. Ofcourse this has to be done each time a screen is resized.
  Any ideas?</p>