Increase the height of Dropdown menu when using mat-expansion-panel - css

Question

I have ng-select wrapped inside mat-expansion-panel. I would like to be able to increase the height of the dropdown list to go beyond the height of mat-expansion-panel but I cannot get that effect. I have tried to play around with z-index but still not working.
Stackblitz Example here for list of countries
My code:
HTML
<mat-accordion>
<mat-expansion-panel class="shadow">
<mat-expansion-panel-header>
<mat-panel-title>
<b>Location</b>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="location">
Country
<ng-select class="m-t-10" [(ngModel)]="selectedCountry">
<ng-option *ngFor="let country of countries" value="country.value">
<div class="famfamfam-flags {{country?.value.toLowerCase()}}"></div>
{{country?.label}}
</ng-option>
</ng-select>
</div>
<mat-divider></mat-divider>
<div class="location">
Province
<ng-select class="m-t-10" [(ngModel)]="selectedProvince">
<ng-option *ngFor="let province of provinces" value="country.value">
{{province?.label}}
</ng-option>
</ng-select>
</div>
<mat-divider></mat-divider>
<div class="location">
District
<ng-select class="m-t-10" [(ngModel)]="selectedDistrict">
<ng-option *ngFor="let district of districts" value="district.value">
{{district?.label}}
</ng-option>
</ng-select>
</div>
</mat-expansion-panel>
</mat-accordion>
import { Component,ViewEncapsulation} from "#angular/core";
import { CountryListService } from "./../country.service";
#Component({
selector: "app-location",
templateUrl: "./location.component.html",
styleUrls: ["./location.component.css"],
encapsulation: ViewEncapsulation.None,
providers: [CountryListService]
})
export class LocationComponent {
constructor(private countryList: CountryListService) {}
selectedCountry = "Select";
selectedProvince = "Select";
selectedDistrict = "Select";
countries = this.countryList.getCountries();
provinces = [{ label: "province1", value: "province1" }];
districts = [{ label: "Dist1", value: "District1" }];
}
Countries Service
import {Injectable} from '#angular/core';
#Injectable()
export class CountryListService{
constructor(){}
getCountries(){
return CountryListService.COUNTRIES;
}
private static readonly COUNTRIES = [
{value: 'AF', label: 'Afghanistan'},
{value: 'AX', label: 'Åland Islands'},
{value: 'AL', label: 'Albania'},
{value: 'DZ', label: 'Algeria'},
{value: 'AS', label: 'American Samoa'},
{value: 'AD', label: 'Andorra'},
{value: 'AO', label: 'Angola'},
{value: 'AI', label: 'Anguilla'},
{value: 'AQ', label: 'Antarctica'},
{value: 'AG', label: 'Antigua and Barbuda'},
{value: 'AR', label: 'Argentina'}
];
}

Answer 1

I'm not sure about what your are trying to do but I think what you are looking for is :
.ng-dropdown-panel {
position: relative !important;
}
To expand the height of the mat-expansion-panel when you display the dropdown list options.