弹性布局 在允许 收缩，但是不允许换行的条件下 为什么没有收缩而是溢出了？-灵析社区
导师小jio## 现象 [https://demo.cssworld.cn/new/6/2-2.php](https://link.segmentfault.com/?enc=OxaNoTDUfhCloAvLGEWTgQ%3D%3D.zIPo24Xt9%2BxVbBxyrnLSA%2FOn%2B5jFV%2FYLzGRGTX4s59%2BOIVLP8mQ9yy5R%2Ff30iBmm)  1. container容器的宽度是320px 2. 内部子元素的 累计宽度大于320px 3. 弹性子元素的 flex-shrink 值为1 ，也就是默认允许收缩 4. flex-wrap的默认值为nowrap ,表示不允许换行 问题： 既然不允许换行，但是允许收缩，为什么 子元素 没有收缩适应弹性容器，而是溢出了？ ## 我些的测试  为啥 会出现两种不同的效果？
代码剑客行你理解错 flex-shrink 的意思了，flex-shrink: 1 的意思是收缩系数为
1。它只是个乘法里的系数，实际会收缩到多少，还要结合具体情况来看。
题中的这里其实是有收缩的，但收缩后子元素又被图片的宽度给“撑开”了。因为图片不像文本，溢出父元素以后它可以按照 "work-break"
的设置去换行。图片本身默认情况下是“不知道”该咋处理溢出的，想要让它知道，可以有两种方式：
1. 给 flex 的子元素加 "overflow: hidden"（默认是 "visible"，这个应该很好理解）：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/3403844dc0881c2ed6c408c9d7834e9f.png)
2. 给 flex 的子元素加 "min-width: 0"（默认是 "auto"，对于 div 和 img 来说其实就是 "fit-content"、也就是最小宽度等于图片原始宽度，这也是为啥你这里它不收缩的主要原因 —— 图片已经到了自己能够到的最小宽度了）：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/72afc148ca502fd539c30e7e54a2d4ae.png)
P.S. 这种方案同时还要给 flex 容器元素本身设置 overflow，否则最后一张图就会像图里那样溢出部分也会显示出来。
当然了，上面的方案都是从 flex 子元素入手的，像你的链接里第二个例子里那样直接给 img 设 "max-width: 100%" 也是一种解法。
***
参考阅读：
«"https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-> past-content-> size" (https://link.segmentfault.com/?enc=NnaI7l22wgIpFZoo%2FB7Xmw%3D%3D.KmGv2f1g9chbfGnzsqtXtwaK4ieQ4gy%2FV7jiZIeTT%2FePObmkoGgVVSGe0YtSS%2BfRlI3FNQ2QgDp32O4dI16mOH0XhWDrHJPHe0REqkXZDmEeu0twYckFoiTJ5aelfJ%2BW)»