Angular Mat-dialog is displaying two scrollbars, how can I remove the second?

Question

I'm trying to build an angular aplication that needs a dialog component on the click of a button, and the problem is that when the Dialog opens it displays two scrollbars (as you can see in the picture), one for the content and another for the whole dialog. I've tried a few solutions to it, like adding 'overflow:hidden' to the css file or 'padding:0' as some solution say on the forums, but it haven't worked yet. Can anyone help me? (My intent is to keep only the inner scrollbar.)

Image of the problem: [1]: https://i.stack.imgur.com/oU9hD.png

PS: this is a angular example dialog, which the source code can be found at: https://material.angular.io/components/dialog/examples in the section "Dialog with header, scrollable content and actions".

Please let me know if I need to provide any other info about the problem

Answer 1

The outer container of the dialog overflow property set to 'auto'. Try to target the specific class of the outer container and set the height and overflow property to 'initial', which will remove the fixed height and overflow property and allow the container to adjust to the size of its content.

.mat-dialog-container {
  height: initial;
  overflow: initial;
}

Another thing you can try is to add overflow: auto to the inner container of the dialog

.mat-dialog-content {
  overflow: auto;
}

Answer 2

i've solved the problem here just now... It happened that the mat-dialog-content had overflow:auto and the dialog class itself had a 24px padding, so i've discovered that a could define a new class to the dialog (using panelClass as a property on the dialog.open() fucntion) inside the function that creates it, so I made it and defined it as 0px.