title: Angular cdk-virtual-scroll-viewport: does not render correct number of items
body: <p>I am using cdk-virtual-scroll-viewport to dynamically render items a small set at a time as the user scrolls.</p>
  <p>The viewport only displays 5 items, regardless of the height given to the cdk-virtual-scroll-viewport element.</p>
  <p>In the component, I load an array of 100 strings.</p>
  <p>Each item is 48px in height.  The viewport is set to 480px in height.  So, I expect to see 10 items at a time.  It only renders 5.</p>
  <p>In the html:</p>
  <pre><code>                &lt;cdk-virtual-scroll-viewport itemSize=&quot;48&quot; class=&quot;viewport&quot;&gt;
                      &lt;mat-option *cdkVirtualFor=&quot;let person of filteredPersons&quot;
                          [value]=&quot;person&quot; class=&quot;animated slideInRight&quot;&gt;
                          &lt;div class=&quot;option-user&quot;&gt;
                              &lt;img class=&quot;image-cropper&quot;
                                  src=&quot;......&quot;
                                  alt=&quot;User Picture&quot; /&gt;
                              {{person}}
                          &lt;/div&gt;
                      &lt;/mat-option&gt;
                 &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>
  <p>In the css:</p>
  <pre><code>.viewport {
      height: 480px; 
  }
  
  .option-user {
      height: 48px;
      display: flex;
      flex-direction: row;
      align-items: center;
  }
  </code></pre>