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?

https://stackoverflow.com/q/51001326/3563013

Comments

[Mattia Astorino]

On firefox all works as expected. On Chrome it seems to be a render error because if you uncheck/check one of img or .funny properties from the inspector the image issue get fixed.

Btw, since .parent have a fixed height (it force the aspect ratio of the image) you can't make the last image covering the space maintaining his aspect ratio without touching .funny. You can try to use object-fit cover on the last image..but it will crop the image.

You can also set .funny to have a max-with that match your requirements.

[Jhomkarlo]

Well, i don't know why div.funny doesn't take the width of it's contents, i prefer avoiding those and thinking differently.

You can take the img and putting as a direct child of div.parent

jsfiddle.net/ohLc5xyw/126/

I hope this work for you.

[Kabue Charles]

thanks. i noted that when the image is a direct flex-item, it works, until it is a child of another flex item. the latter is my requirement... i also noted that when i specify the height of the image in pixels, it works, but that is half responsive... jsfiddle.net/ohLc5xyw/100/