Html 为什么img元素在flexbox中的行为不同？

如果我有一个flexbox，最大宽度为500px，内部有3个

img

元素，它们超出flexbox的

max width

但是，如果我将所有这些

img

元素包装在

div

中，它们仍然包含在flexbox的

max width

中

我认为这可能是由于

display

属性造成的，但是将

img

元素更改为

display:block

也无法将其包含在内

flexbox溢出：

.flex-box{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：500px；
保证金：0自动；
}
img{
宽度：100%；
最大宽度：100%；
}

诀窍在于宽度/最大宽度中使用的百分比。。在第一种情况下，它与容器（宽度：700px）相关，在第二种情况下，它与div相关，div是一个弹性项，其大小取决于内容（阅读副本以了解此部分）@Temaniaf如果一旦你指出这一点，它看起来太明显了……有没有办法让所有图像都包含在flexbox中，而不必将它们包装在所有单独的div中？是的，图像的最小宽度：0技巧在于宽度/最大宽度中使用的百分比。。在第一种情况下，它与容器（宽度：700px）相关，在第二种情况下，它与div相关，div是一个弹性项，其大小取决于内容（阅读副本以了解此部分）@Temaniaf如果一旦你指出这一点，它看起来太明显了……有没有任何方法可以将所有图像保存在flexbox中，而不必将它们包装在所有单独的div中？是的，图像的最小宽度：0