Cannot bring from the suggestion list in a modal

I use PrimeNG AutoComplete inside PrimeNG Dialog and I list elements below the AutoComplete in this dialog.

I want to do:

1. The max-height of the modal dialog is 300, if the added elements' total height is bigger than it then modal's scrollbar should be visible.

2. When there is no element in the list, the AutoComplete's suggestion list should be visible over the dialog.

But when I set the overflow property of the modal or not, the AutoComplete suggestion list is displayed inside the modal. Is it possible to make 2 elements as shown below? I also display scrollbar when the total elements in the modal are 10. Any idea?

Here is CSS style:

body .ui-dialog {
    overflow-y: auto !important;
    max-height: 300px;
}

body.ui-autocomplete-panel{
    position: relative;
    z-index: 9998!important;
}