弹性布局：子元素允许收缩，禁止换行却溢出容器，原因何在？

弹性布局：允许收缩，禁止换行下溢出的原因

在弹性布局中，如果子元素的累计宽度大于容器宽度，并且设置为允许收缩（flex-shrink）但禁止换行（flex-wrap: nowrap），则子元素可能不会按预期收缩，而是溢出容器。

原因在于你对 flex-shrink 的误解。flex-shrink: 1 表示子元素在收缩时乘以系数 1，但实际收缩量取决于具体情况。在你的示例中，子元素确实收缩了，但由于内部图片的宽度，它们被撑开了。这是因为图片不同于文本，即使溢出父元素，它们也能根据 work-break 设置换行。

若要解决此问题，你可以：

• 给子元素添加 overflow: hidden（默认设置是 visible）：

overflow: hidden;

• 给子元素添加 min-width: 0（默认设置是 auto）：

min-width: 0;

这将使得图片最小宽度为 0，允许子元素收缩。不过，你需要同时给 flex 容器元素设置 overflow，以防止最后一张图片溢出。

还可以直接给 img 设置 max-width: 100% 来解决此问题。

以上就是弹性布局：子元素允许收缩，禁止换行却溢出容器，原因何在？的详细内容，更多请关注其它相关文章！