md-menu override default max-width in Angular 2

The same crazy problem for me... how I solved:

::ng-deep .cdk-overlay-pane .mat-menu-panel {
  max-width: 436px;
}

At component SASS file

See: Angular Component Styles - View Encapsulation

and issue comment by @gaiki https://github.com/angular/material2/issues/4462

In some cases the wrapper over .mat-menu-panel can be .cdk-overlay-pane, in that case css should be something like this.

.cdk-overlay-pane.mat-menu-panel {
    max-width: your_custom_value
}

Due to the css specificity rules, 2 classes of specificity are required in order to override the defaults.

Set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can do exactly what you tried:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.