image is not resizing in a flexbox layout

Question

I tried to follow the advice in this answer, and as shown in this CodePen, but the image that needs to flex is still keeping its original dimensions unless the screen is so

Answer 1

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot shrink below the size of its content.

In this case, the section element is the primary flex container.

The flex items are .outerDiv.

Because these flex items contain images, they cannot shrink below the image's size. To overcome this, override the default with min-width: 0.

revised codepen

Okay, so now the item can shrink past the content, but the image is still inflexible.

You can fix that with:

img { width: 100%; height: auto; }

revised codepen

Here's more information: Why doesn't flex item shrink past content size?