Responsively center an image inside a flexbox container, maintaining the aspect ratio and keeping known image boundaries

The image should resize itself to take up as much space as is available in the "purple" container, without upscaling and without changing its aspect ratio.

The image should never overflow the purple container.

The green image overlay is needed, therefore using background-position: contain; is not possible.

object-fit: contain; is also not possible for the above reason as well as the still "poor" support (~80%, thanks Microsoft...)

Example sandbox