title: How to reduce the size of MatSelect DropDown Panel
body: <p>I am trying to reduce the default size of mat-select drop-down panel, But unable to figure out how to do it  </p>
  
  <p>I have tried giving width , have tried overriding panel class in angular mat-select, But the size doesn't seem to go down</p>
  
  <p><strong>My Template File</strong></p>
  
  <pre><code>    &lt;div class="col-md-8"&gt;
         &lt;mat-form-field style="float: right"&gt;
            &lt;mat-select panelclass="my-panel" placeholder="Select Course"(selectionChange)="selectCourse($event,courses)" disableOptionCentering&gt;
           &lt;mat-option *ngFor="let course of courses" [value]="course.courseId"&gt;
            {{course.courseCode}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Css File</strong></p>
  
  <pre><code> .my-panel {
     background: orange;
     height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-width: 350px !important;
     }
  </code></pre>
  
  <p><strong>Expected Result :</strong>
  <br>
  <a href="https://i.stack.imgur.com/ejAm8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ejAm8.png" alt="Expected Result"></a></p>
  
  <p><strong>Actual Result :</strong>
  <a href="https://i.stack.imgur.com/w9Wot.png" rel="noreferrer"><img src="https://i.stack.imgur.com/w9Wot.png" alt="Actual Result"></a></p>
  
  <p><a href="https://i.stack.imgur.com/cZr2T.png" rel="noreferrer">New Issue</a></p>