title: Angular mat-select number of shown options
body: <p>I have a <code>mat-select</code> element with a fix number of <code>mat-option</code> elements. To see the last element i have to scroll the list. Is it possible to expand the area so i can see the last element without scrolling?</p>
  
  <pre><code>&lt;mat-form-field appearance="outline"&gt;
      &lt;mat-select&gt;
          &lt;mat-option [value]="0"&gt;Automatically&lt;/mat-option&gt;
          &lt;mat-option [value]="10"&gt;10&lt;/mat-option&gt;
          &lt;mat-option [value]="20"&gt;20&lt;/mat-option&gt;
          &lt;mat-option [value]="50"&gt;50&lt;/mat-option&gt;
          &lt;mat-option [value]="100"&gt;100&lt;/mat-option&gt;
          &lt;mat-option [value]="-1"&gt;All&lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>[What i have]</p>
  
  <p><img src="https://i.stack.imgur.com/ozVzh.png" alt=""></p>
  
  <p>[What i want]</p>
  
  <p><img src="https://i.stack.imgur.com/Wp3ge.png" alt=""></p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Solution:</strong></p>
  
  <p>I finally solved it that way:</p>
  
  <pre><code>@Component({
    selector: 'select-value-binding-example',
    templateUrl: 'select-value-binding-example.html',
    styleUrls: ['select-value-binding-example.css'],
    encapsulation: ViewEncapsulation.None
  })
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.mat-select-panel{
    max-height: &lt;your new height&gt;
  }
  </code></pre>
  
  <p>in component related .scss-file</p>