Bootstrapの導入時にGoogle Mapが表示されない

事象

Google Mapを導入、正しく動く事を確認後、見た目を修正する為にBootstrapを導入し
見た目を整え終えたところ、Google Mapが表示されない問題を発見しました。

• ローカル・本番環境共に表示されなくなった
• 急に表示されなくなったのでGoogle Map API周りが問題だと2週間程原因究明に当たりましたが原因不明....
• Google Mapが正しく表示されていたbranchからcloneして確認すると正しく表示されたのでAPI周りではないと判断
• 原因はBootstrap周りだと特定し原因調査

環境

Ruby 2.6.3
Rails 5.2.3

表示されないソース

Map表示部

<div class="map_area">
  <div id="map"></div>
</div>

CSS

body {
  min-height: 100%;
}

.map_area{
  height: 400px;
}

#map{
  height: 90%;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  width: 50%;
}

参考記事

Bootstrap3(Honoka) + Google Map APIでMapが正常に表示されない問題について
Bootstrap + Google Mapsで画像が表示されない不具合

解決したソース

CSS

// 追加したコードのみ記載

html {
  height: 100%;
}

表示された！！！

原因

親要素にheightの大きさに関する記述が明示されていないのが問題なのだと思います

と先ほどの記事に書いていましたがbody{min-heigth: 100%}で指定しているのに何故だろう....
そして表示されなかった当時の状態にコードを戻しても再発しませんでした......

一応解決しましたが、個人的にモヤモヤが残る結果になってしまいました。
まだまだ理解が浅い未熟者ですが、誰かの役に立てれれば幸いです。