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

本篇文章给大家分享《弹性布局：子元素允许收缩，禁止换行却溢出容器，原因何在？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

在弹性布局中，如果子元素的累计宽度大于容器宽度，并且设置为允许收缩（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% 来解决此问题。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。