レスポンシブ時 IEでflex-direction: columnでjustify-contentでspace-betweenした時高さが狂う

縦並びにしたかったので、以下のようにしました。

<div class="flex">
<p><img class="img-responsive" src="hoge" alt=""></p>
<p>ホゲ</p>
<p>ホゲ</p>
</div>
<style>
.flex{
display: flex;
justify-content: space-between;
flex-direction: column;
width: 200px;
height: auto;
}
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
</style>

</div>

<style>

.flex{

display: flex;

justify-content: space-between;

flex-direction: column;

width: 200px;

height: auto;

}

.img-responsive{

display: block;

max-width: 100%;

height: auto;

}

</style>

IEで確認したところimgの高さが考慮されず、もともとの高さが適用されてしまいました。