I have two images in a row that should each occupy 50% of the screen width. However, when using flexbox the images shift themselves so that 50% of the image of each is displayed off screen, since the images aren’t being scaled down. Can anyone help me with this?
You have to give your image 50% width, or put it in a container div at width 50%.
I looked at your page an on this section nothing has a dimension, HTML can’t figure that for you, so it takes what he has: the height of the image, and respect that. And Flexbox does what you tell him: shrink the box.
Flexbox is a way to align, order and distribute containers in space. An image with no dimensions won’t be resized by Flexbox itself.
So to achieve what you want without giving dimensions to anything, you need to remove the class on your image, put each image in a div and put the image class to the divs. Then it works as expected: both divs are 50% and the images inside resize automatically.