Почему растягивается изображение при использовании flexbox?

Пожалуйста, переформулируйте вопрос. Непонятно что конкретно вы хотите узнать.

При добавлинии в блок контента кроме картинки, картинку растягивает по высоте. Как с этим справится?

Ну так, а как вы хотели если у вас стоит width: 100%; height: 100%; для img. Добавляйте текст снизу в отдельных блоках, либо задавайте фиксированную высоту для изображений по максимальной картинке - min-height: 300px;

DanKud, я вижу следствие, но не могу понять как его считает браузет, что от чего зависит

Антон Кунаковский, что как считает? Размер картинки? Так вы прописали, что 100% всего блока у вас должна занимать картинка. При добавлении в блок только картинок высота блока у вас измеряется по самой высокой картинке. При добавлении еще одного элемента блок расширяется и картинка расширяется вслед за ним, поскольку занимает 100% объема. Добавляя дефолтный параграф блок у вас стал выше на 50px (18px сам текст + 16px маргин сверху и снизу). Следовательно высота картинок у вас стала на 50px больше, потому что она выровнялась по 100% высоте блока, который стал на 50px выше. При этом все что ниже картинки, выходит за пределы блока, потому что 100% его уже занято картинкой.