Applying flex to the container of two images of different sizes breaks the aspect ratio - Oldagram

[near dirge]

Code: https://v1.scrimba.com/scrim/czMDLETw

The aspect ratio of the pfp on the right side breaks after applying flex to the container, but as far as I know flex is required to put space-between the logo and the pfp. I've tried many different approaches and searching for an answer but nothing has helped. object-fit: contain; almost seemed to work, but then I can't apply a border-radius (object-fit also hasn't even been taught yet).

Is there something that I'm not remembering here??

[still glen]

The problem I think is that your cross axis is stretched causing the height of the image to be 100% of the container giving it a stretched look... Suggest here that you give header the following:

align-items: center;

This will avoid the stretch and now you can tweak as you see fit.