IEだけ謎の余白がありました。
原因はflex-direction: column
原因は画像と一緒に使った「flex-direction: column」だったようです。
画像は一見綺麗に表示されているように見えても、元の画像の高さがそのまま余白となって現れてしまうみたいです。
でも「flex-direction: column」を使わないわけにはいかないので…。
min-heightを指定する
解決方法は「min-height: 0%」を指定することです！
※「min-height: 0」ではうまくいかないみたいなので注意です。「％」が重要な模様。
私の場合は以下のように全要素に追加しました。全体に指定して都合が悪い場合は、それぞれの要素に指定してももちろん大丈夫です。
*{
min-height: 0%;
}これで、謎の余白がなくなりました🙌
