Google maps and Angular material design dialog full width

I have inserted a map in in an md-dialog. It works, but I cannot get the map to fill the container.

I have "made" a codepen to illustrate my problem:

The "fixed" map dialog uses these styles for the map:

  <div id="map2" style="width: 100%; height:200px"></div>

This is as far as I can get. But I would have liked to do:

   <div id="map" style="width: 100%;height: 100%;"></div>

It seems that it is only the height param that causes problems, as I can get the map to fill 100% width.

I hope someone knows how to do this, at the solution must work on all screen sizes.

Thanks,

Steen


ANSWERS:


try adding position absolute to the div

<div id="map" style="width: 100%;height:100%; position: absolute;"></div>



 MORE:


 ? Google maps key with different google play account
 ? Adding Markers in Maps during app is running unsuccessful
 ? toggle button in google map API
 ? Google Places Autocomplete boundaries doesn't always work
 ? I want google maps marker to stay in the centre of the map while camera position can change iOS SDK
 ? Google maps - keep center when zooming
 ? Type 'Promise<void>' is not assignable to type 'Marker'. Property '_objectInstance' is missing in type 'Promise<void>'. Ionic 2
 ? Google Map is not showing on live site using Avada theme
 ? Adding google tiles with R
 ? Chrome navigator.geolocation.getCurrentPosition() error 403