%ign%ignore_a_1%re_a_1%：允许收缩，禁止换行下溢出的原因
在弹性布局中，如果子元素的累计宽度大于容器宽度，并且设置为允许收缩（flex-shrink）但禁止换行（flex-wrap: nowrap），则子元素可能不会按预期收缩，而是溢出容器。
原因在于你对 flex-shrink 的误解。flex-shrink: 1 表示子元素在收缩时乘以系数 1，但实际收缩量取决于具体情况。在你的示例中，子元素确实收缩了，但由于内部图片的宽度，它们被撑开了。这是因为图片不同于文本，即使溢出父元素，它们也能根据 work-break 设置换行。
若要解决此问题，你可以：
SciMaster
全球首个通用型科研AI智能体
156 查看详情 给子元素添加 overflow: hidden（默认设置是 visible）：
overflow: hidden;
给子元素添加 min-width: 0（默认设置是 auto）：
min-width: 0;
这将使得图片最小宽度为 0，允许子元素收缩。不过，你需要同时给 flex 容器元素设置 overflow，以防止最后一张图片溢出。
还可以直接给 img 设置 max-width: 100% 来解决此问题。
以上就是弹性布局：子元素允许收缩，禁止换行却溢出容器，原因何在？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1161127.html
微信扫一扫 
支付宝扫一扫 
