Flex布局下图片无法等分父元素宽度的原因解析
在使用Flex布局时，子元素图片未能平均分配父元素宽度的现象时有发生。本文将针对以下代码示例，深入分析导致Flex布局失效的根本原因。
代码片段：
<code class="html"><div class="info-img"> @@##@@</img> </div></code>
<code class="css">.info-img {
display: flex;
margin-left: 10px;
width: 300px;
}
.info-img-item {
flex: 1;
/* width: 115px; */
/* flex-basis: 0px; */
/* overflow: hidden; */
/* min-width: 100px; */
}</code>
问题描述：
代码旨在使多个图片平均分配info-img容器的300px宽度。然而，实际效果却并非如此，图片并未平均分配宽度，即使图片总宽度超过父元素宽度，图片也不会缩放。令人费解的是，添加overflow: hidden属性后，图片就能正常平均分配宽度了。这是为什么呢？
问题解答：
问题的核心在于图片元素的默认宽度计算机制。 这与CSS中关于宽度和高度计算的规则密切相关。 默认情况下，图片元素的宽度会根据其自身内容（图片的实际尺寸）来决定，这类似于fit-content的行为。 然而，当我们添加overflow: hidden属性后，图片的宽度计算方式会发生改变，变为min-content，从而使Flex布局能够正确地分配空间。
overflow: hidden改变了图片的计算方式，使其不再根据自身内容自适应宽度，而是允许Flex布局对其宽度进行控制。 因此，添加overflow: hidden后，图片才能正确地平均分配父元素的宽度。 这并非Flex布局本身的失效，而是图片元素默认行为与Flex布局预期行为之间的冲突导致的。
