I had a situation where images in flexbox containers were not behaving responsively, in that they did not scale proportionately depending on viewport width.
This was especially frustrating because emulating the viewport width within a desktop browser did not reproduce the problem (see Figure A). However, on mobile browsers, you could see the incorrect scaling (see Figure B).
After much searching, in turns out that by default, images that are flex-children will be their natural height, regardless of their width.
To fix this, apply align-self: center to the image.