How to change md-autocomplete width in Angular 2 Material 2?

Question

I am stuck with increasing the md autocomplete width to become the size of the corresponding mdInput. Here is my code:

<div class="field">
        <md-input-container class="halfWidth">
            <input mdInput 
            type="text" 
            name="country" 
            [(ngModel)]="model.Country" 
            (ngModelChange)="filterCountries()" 
            [disabled]="progress" 
            [mdAutocomplete]="countriesAutocomplete" 
            placeholder="Country" 
            required />
        </md-input-container>
        <md-autocomplete #countriesAutocomplete="mdAutocomplete" 
            [displayWith]="getCountryName">
            <md-option *ngFor="let country of countries" 
                    [value]="country" 
                    class="fullWidth">
                {{ country.PersianName || country.EnglishName }}
            </md-option>
        </md-autocomplete>
    </div>

And here is the result:

I used the CSS selector md-autocompleteand md-autocomplete .mat-autocomplete-panel, but there was no result.

Answer 1

, . , , . , . .. max-width "none" width "auto" .cdk-overlay-pane CSS , , . , ... ! ...:)

.cdk-overlay-pane{
max-width:none !important;
width:auto !important;}

Answer 2

. , , - :

 :host ::ng-deep .mat-autocomplete-panel{
        width:fit-content;
        }

Answer 3

. CSS. , , -.

, .: (