Is it possible to have a responsive image in a flexbox item?

I asked a question on stack-overflow on adding a responsive image in a flex box item and haven't received a good answer yet.

If the image is one of the flex-box item, it works well - (Jsfiddle)

When the image is inside a flex item, it starts to misbehave.

Scenario 1: Image stretches distorting the aspect ratio (Jsfiddle)

Scenario 2: Image leaves empty space (Jsfiddle)

Scenario 3: The layout is good until the input receives focus, then everything breaks: Jsfiddle

This happens in IE 11, Chrome (Version 67.0.3396.87 (Official Build) (64-bit)), but haven't tested in Firefox and Edge.

Is there something i haven't studied about Flex-box, or is it a bug?