title: Angular mat-menu
body: <p>I want to make a big matmenu (95 items) but it goes over the page.</p>
  
  <p>see my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-menu #departements="matMenu"&gt;
      &lt;button mat-menu-item (click)="choix_du_departement(01)" &gt;01&lt;/button&gt;
      &lt;button mat-menu-item (click)="choix_du_departement(02)" &gt;02&lt;/button&gt;
      &lt;button mat-menu-item (click)="choix_du_departement(03)"&gt;03&lt;/button&gt;
  ...
      &lt;button mat-menu-item (click)="choix_du_departement(95)"&gt;95&lt;/button&gt;
  &lt;/mat-menu&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to manage via .scss
  with </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .mat-menu{
     max-height: 50px;
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>but nothing change</p>
  
  <p>I tried to modify .mat-menu-item too but some it goes off the page</p>