关于flex布局伸缩项为img时，图片不收缩显示的问题

问题描述

今天使用flex伸缩盒布局时，伸缩容器container的宽度317px，伸缩项是两张img，宽度为181px。按理说当伸缩项宽度和大于伸缩容器时，伸缩项会收缩显示。但是实际上并非如此。

尝试的方法

我起初认为是不是还要为伸缩容器或者伸缩项设置其他属性。但是，当我将img换成div时，div却收缩显示了，此时我并没有给伸缩容器或者伸缩项添加其他伸缩相关的属性。div宽高也和img完全一样


然后，我以为div是块级显示模式，而img是行内块显示模式。于是试着将为img添加display:block，结果图片还是不能收缩显示。

最终解决方案

最后，在官方的文档上看到为img添加属性overflow: hidden;此时图片收缩显示。

最后

但是，却还是不明白为什么要这样做？知道其中原理的希望大家留言讨论一下。