GoogleマップはSafariの相対的な高さで開きません

Question

私のプロジェクトの1つにGoogleマップを含むVue 2コンポーネントを使用しています。

コンポーネントは以下の通りです：https://www.npmjs.com/package/vue2-google-maps

コンポーネントは、FirefoxとChromeで本当にうまく動作しますが、Safariで、それは表示されません。 問題は、私はサイズにコンポーネントを使用している相対的な高さであることが判明：

<google-map 
    :center="mapCenter" 
    :zoom="mapZoomLevel" 
    :options="mapOptions" 
    style="width: 100%; height: 100%;" <!-- this line ! --> 
    @g-resize="resized" 
    > 
</google-map> 

私は固定の高さを置く場合はマップが正常に動作します。 問題は、私の現在のレイアウトで、私はシンプルなヘッダーを持っていることで、画面の残りの部分は、マップで満たされているので、今の私のレイアウトは以下の通りです：

<section style="flex: 1 0 auto; display: flex"> 
    <div style="display: flex; flex: 1 0 auto;"> 
     <div style="position: relative; flex: 1; width: auto !important; height: auto !important;"> 
      <google-map></google-map> <!-- with height and width set to 100% --> 

あなたが、私はこの問題を解決する方法を知っていますか？

Answer 1

このから

解決切り替え：これまで

style="width: 100%; height: 100%;" 

：

style="position: absolute; top: 0; bottom: 0;"