SafariでiframeのGoogleMapが半分になってしまいます。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
WordPressでSmart Custom Fieldsを使い、Google Mapの埋め込みを行いました。
Chromeの検証ツールでは特にエラーもなく、問題なかったのですが
iPhoneのSafariで確認したところ、一度パッと全体が表示されるのですがすぐに横半分のサイズに変わってしまいます。

iPhoneのChromeでは問題なく表示されています。
Safariでiframeのバグが発生したりするようなのですが、対処方法あれば教えていただけると嬉しいです。

発生している問題・エラーメッセージ

Google Mapが半分に表示されてしまう。

エラーメッセージは特になし

該当のソースコード

// Googleマップ
    .google-map {
      width: 335px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-top: 150px;
      min-width: 335px !important;

      iframe {
        width: 100%;
        min-width: 335px;
        height: 300px;
      }
    }

試したこと

min-widthなどをつけてサイズが小さくならないようにしても変わらずでした。
!importantなどもつけたけど変わらず。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

多分display:flexのせいだと思います

Comments

[morioka1206]

ありがとうございます。
よくわからないのですが、表示が問題ない表示に戻っていました。
またおかしな表示になった場合、flexのところをいじってみようと思います。