chromeの検証では大丈夫なのに実機で画像が伸びる問題の解決方法

ときどき、Chromeの検証ツールでは問題なく表示されているのに、実機iPhoneで画像が伸びて表示されてしまうことがありました。そんな時の解消方法と未然に確認する方法をメモします。

flexboxを使うと画像が伸びる

原因はflexboxにあるようでした。
「align-items: flex-start;」のcssを１行追記するだけで解決できるようです。

.flex{
  display: flex;
  align-items: flex-start;
}

この画像が伸びる問題、PCのSafariでも同様に起こるようです。
実機で確認する前にSafariで確認してみるのもおすすめ。