title: How to fix position of mat-select-panel in Angular Material
body: <p>I have a project in which I use Angular Material Components and I would like to customize mat-select. I want to achieve select input which mat-select-panel looks like it's dropdown as in native html select. I accomplished good effect using only CSS styles but I have one problem.</p>
  
  <p>The problem is that my mat-select looks different depending on the size of the browser window. More specifically, mat-form-field and mat-select-panel sometimes are not aligned (there left sides are not in line) and this is not acceptable in my project.</p>
  
  <p>This link is how it should look (example: Firefox browser, window size 100%):
  <a href="https://i.stack.imgur.com/ruDku.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ruDku.png" alt="a link"></a></p>
  
  <p>This link is what I want to fix(example: Firefox browser, window size 90%):
  <a href="https://i.stack.imgur.com/c6PUN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c6PUN.png" alt="enter image description here"></a></p>
  
  <p>My predictions why it does not work:
  mat-select-panel has a position absolute and is set to position depending on cdk-overlay-panel. Cdk-overlay-panel position is calculated dynamically. Sometimes fractional width and height values are truncated and hence the difference of one pixel between mat-form-field and mat-select-panel. This is an example: </p>
  
  <p><a href="https://i.stack.imgur.com/M08jH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M08jH.png" alt="enter image description here"></a></p>
  
  <p>What I want to achieve?
  I am looking for a way to make my input always look good regardless of the browser window size. Line between mat-form-field and mat-select-panel must always be straight.</p>
  
  <p>Stackblitz for my input is here:
  <a href="https://stackblitz.com/edit/angular-matselect-style-dwvyu8?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">a link</a></p>