如何强制flex缩小响应图像以适合列方向的容器？

Question

当方向设置为flex-direction: column;时，我已经尝试了许多技巧来强制响应图像适合Flex容器，但它们都不起作用。我必须提到它适用于其他元素，例如文本或当flex方向设置为flex-direction: row;但在我的情况下不适用。我尝试过flex:1;，flex-shrink，flex-grow，max-height属性来实现我想要的但都失败了。

当容器的大小固定（width:234px; height:279px）时，如何创建一个包含一列和三行的Flex容器，并且每行的高度都是灵活的，以便显示最多3个图像大小？如果它们无法放入容器中，则缩小它们但保持纵横比。

My codepen.io code here

Answer 1

添加

img {
  max-width: 100%;
}

到你的代码，你会得到你想要的结果:)