title: How to remove Angular Material Design Menu Box Scroll Bars
body: <p>I have a menu item in the top-right corner of my web app, and the code is below. Problem is, it's wide, and instead of stretching, it just adds a scrollbar to the menu and I tried a bunch of css to fix it but can't seem to figure it out.</p>
  
  <p>UPDATE:
  I've added <code>overflow: hidden !important;</code> as suggested in one of the answers, and that removed the scrollbar, but now it isn't wide enough and so I can't access all the buttons. Tried <code>width: 800px !important</code> with the overflow, but it didn't change the width.</p>
  
  <pre><code>&lt;button md-fab [md-menu-trigger-for]="settings"&gt;
    &lt;md-icon&gt;settings&lt;/md-icon&gt;
  &lt;/button&gt;
  
  &lt;md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu"&gt;
    &lt;div style="display: flex; flex-direction: row; text-align: center"&gt;
      &lt;div style="flex: 1; padding: 24px"&gt;
        &lt;label&gt;Left Side&lt;/label&gt;
        &lt;button md-menu-item routerLink=""&gt; Option 1 &lt;/button&gt;
        &lt;button md-menu-item routerLink=""&gt; Option 2 &lt;/button&gt;
      &lt;/div&gt;
      &lt;div style="flex: 1; padding: 24px"&gt;
        &lt;label&gt;Right Side&lt;/label&gt;
        &lt;button md-menu-item routerLink=""&gt; Option 3 &lt;/button&gt;
        &lt;button md-menu-item routerLink=""&gt; Sign Out &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/md-menu&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.menu-overflow-hidden {
    overflow: hidden !important;
  }
  </code></pre>