title: How to adjust mat-select height to fit its items?
body: <p>In Angular material, I need to increase the height, start and end position of a mat-select dynamically based on list of items. For example, list of options may range from none to 100. So the height should fit to the content and also should not display outside of my application screen. </p>
  
  <p>I used below style but when I have more items, first few items are not getting displayed in screen. If I use margin-top, it breaks the design in another dropdown which is located on top position of my screen. So irrespective of dropdown position, it should display inside my screen with maximum height.</p>
  
  <p>Can any help me to fix this in CSS?</p>
  
  <pre><code>.mat-select-panel {
      max-height: 95vh !important;
    }
  </code></pre>